jQuery with Rails 3
Update: Since this article was written, the jquery-ujs project has been turned into a gem which includes a generator that streamlines this process. Instructions can be found in the README for the Github project.
One of the most talked about features in Rails 3 is its plug & play architecture with various frameworks like Datamapper in place of ActiveRecord for the ORM or jQuery for javascript. However, I've yet to see much info on how to actually do this with the javascript framework.
Fortunately, it looks like a lot of the hard work has already been done. Rails now emits HTML that is compatible with the unobtrusive approach to javascript. Meaning, instead of seeing a delete link like this:
you'll now see it written as
This makes it very easy for a javascript driver to come along, pick out and identify the relevant pieces, and attach the appropriate handlers.
So, enough blabbing. How do you get jQuery working with Rails 3? I'll try to make this short and sweet.
Grab the jQuery driver at http://github.com/rails/jquery-ujs and put it in your javascripts directory. The file is at src/rails.js
Include jQuery (I just use the google hosted version) and the driver in your application layout or view. In HAML it would look something like.
Rails requires an authenticity token to do form posts back to the server. This helps protect your site against CSRF attacks. In order to handle this requirement the driver looks for two meta tags that must be defined in your page's head. This would look like:
In HAML this would be:
Update: Jeremy Kemper points out that the above meta tags can written out with a single call to "csrf_meta_tag".
That should be all you need. Remember, this is still a work in progress, so don't be surprised if there's a few bugs. Please also note this has been tested with Rails 3.0.0.beta.













Comments
meta tags
By Jeremy Kemper (not verified) on 08 Feb 2010 at about 23:17.You can use <%= csrf_meta_tag %> in your head to spit out those two meta tags.
Thanks!
By jhuckabee on 08 Feb 2010 at about 23:24.Thanks for the tip Jeremy. Much simpler.
I just ported the build in
By CodeOfficer (not verified) on 09 Feb 2010 at about 02:20.I just ported the build in rails javascript helpers over to jquery as well
http://www.codeofficer.com/blog/entry/jquery_helpers_for_rails_300beta/
data-method and data-confirm?
By Armando Sosa (not verified) on 09 Feb 2010 at about 05:11.I really like this approach, but I didn't know those attributes. Are they valid HTML?
Thanks!
(Your SPAM filter thinks I'm spam? I think that your SPAM filter is rude :( )
Although much cleaner, this
By Ćukasz Adamczak (not verified) on 09 Feb 2010 at about 10:47.Although much cleaner, this approach still doesn't make the link truly unobtrusive.
I mean, this link works fine for JS-enabled clients, but leads to the "show" action for users with JS disabled.
button_to (aka forms) still seems the way to go for valid post/put/delete actions. And that worked well in 2.x as well.
@Armando, yes, they are valid
By jhuckabee on 09 Feb 2010 at about 12:05.@Armando, yes, they are valid HTML 5 attributes. See http://dev.w3.org/html5/spec/Overview.html#custom
@Lukasz, good point. I would be surprised if the Rails core team hasn't thought about this and ways to address it. For now, yes, button_to seems like a good way to go if you need to support non JS-enabled clients.
Good integration. Thanks
By SM (not verified) on 09 Feb 2010 at about 14:44.Good integration. Thanks
HTML5 and JS required? That
By Anonymous (not verified) on 10 Feb 2010 at about 00:45.HTML5 and JS required?
That is a bit of a restriction isn't it? Will jrails (the Rails 2.3 jQuery drop-in replacement) still work with rails 3 so that those of us who were happy with the old method can use jQuery with rails 3 for maximum browser compatibility/accessability?
HTML 5 custom attributes are
By jhuckabee on 10 Feb 2010 at about 01:14.HTML 5 custom attributes are required by the default implementation, yes. However, given how permissive browsers are, its not something I would worry about.
Also, judging by this: http://www.w3schools.com/browsers/browsers_stats.asp I wouldn't worry about the few percentage of people who might have JS turned off.
What's nice about Rails is that its easy to tweak to your liking. For the majority of users though, the new solution is cleaner and will work just fine.
rails 3 UJS
By grigio (not verified) on 10 Feb 2010 at about 17:13.this is an example of Rails 3 UJS
http://github.com/grigio/rails3-ujs-demo
HTML 5 is not required, this
By Erik St. Martin (not verified) on 18 Mar 2010 at about 18:04.HTML 5 is not required, this will work in browsers that don't support HTML 5 it just will not validate.
There is a legacy helper for those who still want to use prototype and inline js.
Not convincing. No control over callback!
By Shripad K (not verified) on 29 Aug 2010 at about 16:10.Even though this removes all inline-javascript i am skeptical about it being useful for advanced stuff. For one, i have no control over the callback. How about if i wanted to render JSON instead of rendering a js/xml template(js.erb/xml.erb)?
Issue seems to be tackled. Though i have not tried it.
By Shripad K (not verified) on 29 Aug 2010 at about 16:35.jhuckabee: This info can go into the article for those who do not want to go the conventional way (using js.erb)
For people not wanting to go the js.erb way and prefer rendering JSON, you have these custom callbacks available for use:
ajax:loading
ajax:success
ajax:complete
ajax:failure
Example usage:
$("#myform").live('ajax:success', function(data, status, xhr) {
if(typeof(data) == "object") {
alert(data);
} else {
alert($.parseJSON(data));
}
...
});
Thanks
By gposton (not verified) on 05 Jul 2012 at about 04:48.Thanks for this post, it saved me quite a bit of debugging why my session was being cleared on AJAX calls.
Post new comment