Unobtrusive JavaScript in Ruby On Rails [Beginners Guide]

Recently I learned Ruby On Rails, an amazing framework, you can easily build complex web applications with it. In this article, I want to talk about Unobtrusive JavaScript in Ruby On Rails, a tool that can help you build a more responsive web application in a simple way. With it, you can manage all your JavaScript in the server and you don’t need to pollute your HTML files, there is no need for adding events listeners and ajax requests.

To show the power of this tool we will start with a simple example, let create a new Ruby On Rails project:

> rails new app
> bundle install

Let create a resource called book using the generator:

> rails generate scaffold Book title:string description:text
> rails db:migrate

We have a book resource with 7 actions, index, show, new, edit, create, update and destroy, for each action you will have a different page, of course, there is turbolinks gem that optimizes the loading of the page, but that still a page load and using unobtrusive JavaScript we can avoid too many unnecessary page loads without doing any JavaScript and ajax calls at the client-side, all in the server.

For more information about turbolinks check: https://github.com/turbolinks/turbolinks

Index view:

Let start by the new action, when we click new book on the index view, we got directed to a form on a new page, we can instead insert this form dynamically and avoid additional page load.

New view:

First in the index.html.erb file we have the new book link:

<%= link_to ‘New Book’, new_book_path %>

Let add the remote attribute and set it to true:

<%= link_to ‘New Book’, new_book_path, remote: true %>

This attribute tells ruby on rails that this call is a remote call and sending back an Html file is not required, what we can send back is a JavaScript file, in the book controller, we have the new function that handles the new action:

def new
  @book = Book.new
end

This function sends by default and Html file (new.html.erb), in our situation we want to send a JavaScript file so we need to modify it, first we need to add respond_to function block, this function handle different type of responses:

def new
  @book = Book.new
  respond_to do |format|
    format.html { render :new }
    format.js { render :new }
  end
end

So format.html { render :new } is our old default response (you don’t need to specify it if it was the only option, it is the default option), it sends the new.html.erb file. The format.js { render :new } sends a JavaScript file, it sends new.js.erb when the call is a remote call, let see what can we include in this file.

We need to go to the views folder and add new.js.erb inside books folder, this file is a JavaScript file with the erb templating engine, so you can write any JavaScript code but you can also evaluate ruby code inside <%= %> tag as we do for *.html.erb. This file gets sent by the controller when we do a remote request, and JavaScript code gets executed on the client-side, let build this file to get the form inserted dynamically.

We will start by adding an empty div (id = “new-book”) inside the index page, this will be where we will inject our form:

In our JavaScript file, we need to select this div and insert the content, the file should look like this:

document.querySelector(“#new-book”).insertAdjacentHTML(‘afterbegin’, “<%= j render ‘form’, book: @book %>”);

I will not talk about JavaScript functions, that out of the scope of this article, but here are some articles that could help refresh on JavaScript:

https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

As I already explained, you can render ruby code inside <%= %> like we are doing inside this part: “<%= j render ‘form’, book: @book %>”. This is the render function that renders the form partial (we have this partial inside the books folder), this is doing the same thing as inside a *.html.erb files, but you have to specify j tag at the beginning to inform ruby on rail that you are rendering Html partial inside the JavaScript file.

The dynamic index view:

Now when we click on the new book link a form will show up dynamically before the list of books, using these simple steps we transform one view to be rendered dynamically instead of a new page load.

Summary:

Unobtrusive JavaScript is a nice feature that allows us to manage JavaScript in the server and send the required scripts dynamically. In this article, we showed how to implement that in a simple view but you can build on that and make different Html partials and render them on user requests dynamically.