Creating, submitting, and appending content without refreshing the webpage

https://dailysmarty-production.s3.amazonaws.com/uploads/post/img/452/feature_thumb_jquery-rails.jpg

While working on a new Rails project, I was tasked with creating a comment model and implementing the ability to add comments to a video’s show page. I needed to be able to access both the video and comment models, add comments to the video page, display newly added comments, all without interrupting the runtime of the video. Through trial and error, and dissecting various tutorials for older versions of Rails, as well as other programming languages, I found a working method using jQuery and a few snippets of Ruby code.

Have a working Rails app with a User, Video/Post/Other, and a Comments joining model

I am making the assumption that if you have found this blog, you already have a functioning Rails app, and are interested in the method I used to add comments without refreshing a page. To start you will need at least a User model, in my case a Video model, and a Comment model that will join the two previous.

A Rails application root file directory, opened and displaying the contents of a models file.

The User model has many comments, the Video model has many comments, and Comments belong to Users and Videos. Be sure to add a nested route for your video resources, the code within routes.rb should look something like this:

resources :videos do
resources :comments
end

UML diagram representing the belongs_to, has_many relationships between a User, Comment, and Video model

Add jQuery to your Rails application

To add jQuery to a Rails 6 app, there are a few quick things to do. First we need to add gem ‘jquery-rails’ *to our Gemfile. Next you will need to add *require(“jquery”) within your application.js file (mine was located at app/javascript/packs). Finally we will add the following block of code in the middle of our config/webpack/environment.js file. Last, you will need to run ‘yarn add jquery’ within your root directory to ensure everything will work properly.

Image of *config/webpack/environment.js*

Create comment forms, and prepare them to be rendered within the Video show page

To create a new comment in Rails, we need to make a form that will take in the User, the Video and the content body of the comment. We will save this as a partial called _form.html.erb within our comment’s view file.

A form_for with parameters set to “remote: true”, that will be rendered to submit a new comment in the application.

This is the form that I wrote. Ignore the classes and placeholder, what is important here is the arguments that form_for is taking. These arguments correspond with the comments controller within the new and create methods, passing the information needed to persist a comment to the database. The remote: true argument is saying the form is going to call the action that you specify for it.

Within our video show page, we will now render the comment form at the bottom. Above this partial, nested within a tag, is where normally we would display comments while iterating through a collection. Instead, I am using jQuery to target an id I specified in the tag, which will render this section separate from the video playing at the top. This render is looking for a file we need to create called _comment.html.erb.

A partial form containing the user who commenter, a link to their profile, the time the comment was added, and lastly the content of the comment.