Unobtrusive JavaScript in Rails

JavaScript is a very powerful language; for me, it rules the web. One of the most popular use of JavaScript is updating the content of a page without having to reload the page. This article will focus on how to achieve this in Rails.

I recently picked up Ruby and to familiarise myself with the language, I decided to build a little app using Ruby on Rails. While working on the project, the need to render content on a page without reloading came up. It was a bit frustrating trying to get an article that explains this concept to a newbie, so I decided to write about it.

With most JavaScript codes out there, one would probably need to retrieve data from the server and use JavaScript to manipulate the data on the page but with Rails, it is different as I have come to know.

Let’s look at a simple example: Lets assume we have a UsersController and a resource route /user/:name that links to the controller’s index action, we can perform a JavaScript action on a page from the controller.

In the UsersController, add the following code:

In your welcome view page, add the following code which should create a “Display a name” link on the page.

Adding remote:true to the link tag tells Rails that you want to make an AJAX request and when we click on the link, a JavaScript alert should pop up on the page displaying The username to be displayed is: Troy34. It’s that simple and it gets even magical in our next example.

Just like me, I’m sure you don’t just want to display an alert to your users. Now let’s assume the UsersController’s index action makes some important query and returns an array of users, we would like to display this list of users on our page. For the purpose of this example, I’ll list the files we’ll be referring to, just so things don’t get confusing.

Back to our second example. From the example above, we already have a link on our Welcome Page that calls the index action of the UsersController. So next, we modify the code in our controller:

In our index template, we add the following code:

So lets run through the events from the point of clicking our “Display a name” link on the index page:

I’m sure right now, you’re marvelling at the elegance at which this was done. This helps you do a lot of amazing things without messing up your view and if the need to change things ever arises, you can do all that in one place.

I hope this has helped you understand how Unobtrusive JavaScript works in Rails. Please 👏 and share.

Thanks!

Related posts:

In every larger goal is a bunch of smaller goals — that’s the only way to achieve whatever it is you’re wanting to do. Tiny goals make the dream work. Think about it — large goals feel unattainable…

This Thursday is Thanksgiving, but you’d never know it based on how many companies decided to stay open in some manner. It was predicted by pundits (myself included) for many years now. Since…

Delight and motivate your team with fun announcements for won Salesforce opportunities. In this guide, we’ll be using Zapier to trigger a Gleebeam notification on screens in your office whenever a…