Rails 3.0 beta & JS Helpers with jQuery

Question

In the release notes for Rails 3.0 beta it says:

"Unobtrusive JavaScript helpers with drivers for Prototype, jQuery"

So how do I setup Rails 3 to use jQuery then? It still loads all the Prototype libraries by default.

I took this to mean that Rails 3 has built in functionality similar to the jRails plugin, but maybe I'm misunderstanding :)

Also, as a bonus question, if I am using Prototype is there a way to get Rails to load the minified versions, and even better a single concatenated JS file to cut down on http requests?

Thanks.

Answer 1

I don't know about Rails 3, but I'll try to answer bonus question.

You can put whatever you want in public/javascript directory. By default it will load files: prototype.js, effects.js, dragdrop.js and controls.js (read more). If you want to compress all js files and send it in one file, you can use this plugin.

Of course it won't work for dynamicaly generated js files.

Answer 2

I'm also working on that with trying to convert my old ajax with rails 3.

From what I can tell, they moved to a structure that adds a data-remote=true and when you add :remote => true to something like link_to which is supposed to replace link_to_remote in rails 3, so there are no more onclick methods that calls Ajax methods.

So, how does Ajax work in Rails 3, then? Well, you are supposed to have javascript methods that watch for when you click links that have a property of data-remote=true and does something with it, but don't actually include them in Rails (from what I can tell), it's library agnostic since you can write these methods to watch for clicks in prototype, jquery, write them yourself, or whatever else is out there.

I did find some javascript on github to get started that will watch for these events:

In prototype

In jQuery

I think in order to actually load jquery instead of prototype, you're going to have to just download it to public/javascripts and manually specify jquery, use javascript_include_tag :all, or override javascript_include_tag (not recommended)

Answer 3

Unobtrusive JS doesn't refer to the PrototypeHelper methods, but to remote forms and links and the like. The concept is that you include :remote => true in your form_for or whatever helper methods support it, and then a driver called rails.js will look for those remotes and intercept the submit or click events and send them via xhr.

To use jquery you'll just need to replace the prototype ujs driver (which ships with rails) with the jquery ujs driver, that was extracted into its own repo shortly before the rails 3 beta release. You can find it here.

Answer 4

Hi firecall, you can look at this article: http://flow.handle.it/past/2010/2/9/jquery_in_rails/. It explains the process to work with Unobtrusive JS and jQuery.

Hope it helps.

Answer 5

When you create a Rails 3 app, just pass along the -J param as well:

$ rails app_name -J

This will skip over including the Prototype libraries. Now, all you need to do is drop the latest jquery.js file into the public/javascripts directory. Once you do that, you'll also need the jQuery version of the rails.js file. You can get that here:

http://github.com/rails/jquery-ujs/blob/master/src/rails.js

EDIT: You need to include these files in the top of your layouts to gain the functionality. You can do this by:

<%= javascript_include_tag "jquery", "rails" %>

Hope this helps!

Answer 6

Check out Google Closure

It can turn multiple javascript files into a single compressed js file. It can even figure out which parts of the library you aren't using and remove them as well.