Getting AJAX to work in Rails 3 with jQuery

Keith Schacht| July 1st, 2010
Post to Twitter

I spent a good chunk of time getting AJAX to work properly in rails 3 using jQuery. My sticking point was that the basic RJS I was using (like page.replace_html) was not working unless I installed and patched the jrails plugin. What I learned was not to use RJS at all, just write your jquery directly. The jrails plugin used to replace all the RJS function calls but those are being phased out, jrails is now officially obsolete.

Quick summary to get things working:

  • Delete all files in public/javascripts except application.js
  • Download http://github.com/rails/jquery-ujs/raw/master/src/rails.js into public/javascripts
  • Download jquery from http://jquery.com/ into public/javascripts
  • Inside your page HEAD in layouts/application.html.erb remove any reference to javascript include :defaults and add
    <%= csrf_meta_tag %>
    <%= javascript_include_tag “jquery.js”, “rails.js” %>
  • Now you can use :remote => true inside and link_to, button_to, form_tag, etc and it should work
  • When you create the view that responds to the remote call, name it action.js.erb rather than action.js.rjs. If your view is an RJS file it will contain something like:
    page.replace(‘#div_id’, render( @object ) )
    Rails will try to generate prototype code using this which won’t work with jquery. Instead, when you name it an ERB file, it will contain straight jquery code like:
    $(“#div_id”).html(“<%= escape_javascript render( @object ) %>”);

These references were all helpful:

Unobtrusive javascript in rails 3
Railscast – Unobtrusive javascript
jQuery and Rails 3

12 Responses to “Getting AJAX to work in Rails 3 with jQuery”

  1. aratak Says:
    November 29th, 2010 at 5:09 am

    Thanks, cap.

  2. cp Says:
    February 15th, 2011 at 5:31 am

    Thanks a ton! You saved the day for me!

  3. Shajin Says:
    March 11th, 2011 at 4:27 am

    vva..good da…
    Nice and simple. :) :) :D

  4. James Says:
    March 20th, 2011 at 11:36 pm

    Thanks, I haven’t found an explanation that put the steps to using jquery this succinctly. I was very confused about some tutorials using .js.erb vs. js.rjs; didn’t understand about why page.replace_html wasn’t working, and the fact that jrails is now obsolete! Thanks!!

  5. Burc Says:
    May 16th, 2011 at 2:36 am

    I am stuck and a bit desperate at this stage :), I have followed many instructions to get this running but none of them worked (they are similar to yours.)
    What happens is that all works fine, but the javascript returned by the action.js.erb never gets executed (it does get download, i can see its XHR resource), if I copy what is return and run it from the console, my page is properly updated.

    Any ideas where I should be digging?

    Thanks.

  6. Puneet Pandey Says:
    May 18th, 2011 at 1:43 pm

    Hi Keith,

    Thanks for sharing this. Understanding Rails3-ujs, was tough initially, but after getting good hands on experience, things are working pretty faster. :)

    Best Regards
    Puneet

  7. Ashish Says:
    September 19th, 2011 at 5:44 am

    Thanks Keith. This was very helpful

  8. Nitin Says:
    February 22nd, 2012 at 11:33 pm

    Thanks Keith. you save my day.you know how much it matters………..

  9. luffycn Says:
    March 11th, 2012 at 6:40 am

    I got an error
    “NetworkError: 406 Not Acceptable – http://localhost:3000/answers/agree.7

  10. Tony Says:
    May 23rd, 2012 at 4:53 pm

    But how do you handle the data on the controller and call the action.js.erb?

  11. Muriel Salvan Says:
    August 1st, 2012 at 2:35 am

    For Ajax pages refresh, you can also use the rails-ajax gem. It automatically ajaxifies your application and updates only the pages content without refreshing the layout by default.

    Can be customized at will and handles browser’s history, bookmarking, scripts executions, forms, redirections…

    http://rails-ajax.sourceforge.net

  12. sachin Says:
    October 4th, 2012 at 5:55 am

    Will you please explain it by an example so that everybody can understand it better.

Leave a Comment