Using Unobtrusive JavaScript and AJAX with Rails 3



Background: What is Unobtrusive JavaScript?





Up until version 3, Ruby on Rails generated obtrusive JavaScript. The resulting code wasn't clean, but even worse, it was tightly coupled to the Prototype JavaScript framework. This meant that unless you created a plugin or hacked Rails, you had to use the Prototype library with Rail's JavaScript helper methods.



  • data-method - the REST method to use in form submissions.
  • data-confirm - the confirmation message to use before performing some action.
  • data-remote - if true, submit via AJAX.
  • data-disable-with - disables form elements during a form submission

For example, this link tag

would send an AJAX delete request after asking the user "Are you sure?."


Now that we've reviewed UJS and how Rails implements UJS, let's set up a project and look at some specific applications. We'll be using the jQuery library and UJS implementation in this tutorial.

Step 1: Setting up the Project


Notice that I'm instructing Rails to skip the prototype JavaScript file, since I'm going to be using the jQuery library.

Let's start the server just to make sure everything appears to be working.

And, voila!


  • framework JavaScript file (jquery.js, prototype.js, or mootools.js)
  • rails.js - the code implementing rails UJS (for whatever framework you've chosen)
  • application.js - your application JavaScript

If you haven't already, download jquery.js (or refer to a CDN) and rails.js and include them in your public/javascripts directory.



Alternatively, you could grab jQuery from a CDN (i.e. by manually included a script tag pointing to the correct location. If you do this, be sure to remove 'jquery' from the JavaScript_expansions configuration item.

Step 2: Generating Some Code

To demonstrate the rails UJS functionality, we're first going to have to have some code to work with. For this demo we're just going to have a simple Post object. Let's generate that now

And then let's migrate our database to create the posts table.


Ok, it's all working! Now let's dig in and see how to use the UJS and AJAX functionality baked into Rails.

Step 3: Adding AJAX


Let's look at a couple of commonly used rails helpers and the JavaScript they generate

AJAX Form Submission and Javascript ERB Files

If we look at our Posts form, we can see that whenever we create or edit a Post, the form is manually submitted and then we're redirected to a read-only view of that Post. What if we wanted to submit that form via AJAX instead of using a manual submission?





That's all that's needed to do the AJAX submit, but how do we perform a callback after the AJAX call returns?





Now that our controller knows how to handle AJAX calls, we need to create our views. For the current example, add create.js.erb in your app/views/posts directory. This file will be rendered and the JavaScript inside will be executed when the call finishes. For now, we'll simply overwrite the form tag with the title and contents of the blog post:



AJAX Callbacks Using Custom JavaScript Events

Each Rails UJS implementation also provides another way to add callbacks to our AJAX calls - custom JavaScript events. Let's look at another example. On our Posts index view (http://localhost:3000/posts/), we can see that each post can be deleted via a delete link.


Which produces the following output:


  • ajax:before - right before ajax call
  • ajax:loading - before ajax call, but after XmlHttpRequest object is created)
  • ajax:success - successful ajax call
  • ajax:failure - failed ajax call
  • ajax:complete - completion of ajax call (after ajax:success and ajax:failure)
  • ajax:after - after ajax call is sent (note: not after it returns)

In our case we'll add an event listener to the ajax:success event on our delete links, and make the deleted post fade out rather than reloading the page. We'll add the following JavaScript to our application.js file.


Now when we delete a Post it will gradually fade out.


Well, there you have it. Now you know how to make AJAX calls using Rails 3 UJS. While the examples explained were simple, you can use these same techniques to add all kinds of interactivity to your project. I hope you'll agree that it's a big improvement over previous versions, and that you'll try it out on your next Rails project.

What techniques do you use when implementing AJAX in Rails?