Adding HTML Content Dynamically in Rails 6 Using jQuery

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 addrequire("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 runyarn 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 div 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 thediv 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.

•  •  •

Next we will render the partial form in Video page, and setup our jQuery file

Iterating through each comment and rendering that data through the "_comment.html.erb" file.>

•  •  •

At this point our video show page’s comment section will look something like the photo above. Now we get to add the corresponding create.js.erb file that is going to pair with our create comment action listed within the comments controller. Be sure to comment out any redirects you may have had previously, as these will refresh your page and counter the methods we are trying to utilize.

Now that we have made a create.js.erb page within our comments view file, it is time to fill it with some jQuery! I wanted to accomplish two things in this, first was to add a comment to a page that would display without refreshing, second is to reset the comment content after adding a comment. To accomplish these goals we only need two lines of code that will target our specified ids and classes.

•  •  •

Two lines of jQuery, one to append the comment being made to the bottom of the comments column, and a second to clear the comment content text area after submitting the comment.

•  •  •

The first argument in each line is where the comment*pane id, and comment class were targeted. Following these arguments are actions, .append which will add it’s following code to the bottom of an item, and .val which sets the value of the comment class to an empty string (or return to placeholder value).

•  •  •

After saving all of your files, you should now have a functioning comment button, that will add comments without refreshing your page!

A GIF of successful comment appending. Hello World !

•  •  •

Sources/References:

[**jQuery** *jQuery: The Write Less, Do More, JavaScript Library*jquery.com](https://jquery.com/)

[**rails/jquery-rails** *jQuery! For Rails! So great.*github.com](https://github.com/rails/jquery-rails)

> Thanks to [ZHENGJIAN LIU](undefined) for being an amazing partner to work with on this project, as well as the rest of my cohort who continue to push me to be the most adaptive programmer I can be!

Hosted demo version missing search function(API key): [**YouPlay** you-play-heroku.herokuapp.com](https://you-play-heroku.herokuapp.com/)

Link to the public repo: [**gabrielhicks/YouPlay** *Mod2 Project with Zhengjian Liu. Contribute to gabrielhicks/YouPlay development by creating an account on GitHub.*github.com](https://github.com/gabrielhicks/YouPlay)