Using jQuery on Rails in 3 easy steps

There are a couple of reasons why you may want to use jQuery in your Ruby on Rails' projects. It could be the shorter code. Or you may find it a little bit more unobstrusive than Prototype. Or, if you're like me, you may have been enticed by the number of plugins available for it.

So how do we use it then?

You can choose to make Prototype and jQuery work with each other, and effectively double the amount of javascript that your user downloads everytime he or she visits your site.

Or you can switch to jQuery altogether, which is what I'll be discussing next.

Download and install jQuery

This should be a no-brainer. Before we can use the darned thing, we have to download and install it first.

Download the latest version of jQuery from here and copy it to your public/javascripts directory. We won't be needing the Prototype/Script.aculo.us files anymore so you can delete them while you're at it.

Download and install jRails

Prototype and Script.aculo.us comes with their very own little Ruby helpers which makes life a little bit easier for us. Instead of writing:

<a href="#" onclick="new Ajax.Request('/person/4', {asynchronous:true, evalScripts:true, method:'delete'}); return false;">Destroy</a>

We simply write this instead:

<%= link_to_remote "Destroy", :url => person_url(:id => @person), :method => :delete %>

Here's another example:

new Form.Element.Observer('suggest', 0.25, function(element, value) {new Ajax.Updater('suggest', '/testing/find_suggestion', {asynchronous:true, evalScripts:true, parameters:'q=' + value})}) 

To this:

<%= observe_field :suggest, :url => { :action => :find_suggestion },
      :frequency => 0.25,
      :update => :suggest,
      :with => 'q'
      %>

Now that we're moving to jQuery, guess what? All those nice little helpers are now broken. But not for long though.

Introducing jRails:

jRails is a drop-in jQuery replacement for Prototype/Script.aculo.us on Rails. Using jRails, you can get all of the same default Rails helpers for javascript functionality using the lighter jQuery library.

Let's install it by running:

./script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails

Then include it in your layouts:

<%= javascript_include_tag "jquery", "jquery-ui", "jrails" %>

Or if you weren't lazy before and deleted your Prototype/Script.aculo.us files, and you're feeling a little lazy now:

<%= javascript_include_tag :all %>

Make a little modification on your previous Prototype/Script.aculo.us helper calls

You'll need to change all id paramaters in your helper calls from :id or 'id' to '#id'. For example, something like this:

<%= observe_field :suggest, :url => { :action => :find_suggestion },
      :frequency => 0.25,
      :update => :suggest,
      :with => 'q'
      %>

Needs to be changed to:

<%= observe_field '#suggest', :url => { :action => :find_suggestion },
      :frequency => 0.25,
      :update => '#suggest',
      :with => 'q'
      %> 

Or something like this:

render :update do |page|
  page.replace 'article', :partial => 'item'
end

To this:

render :update do |page|
  page.replace '#article', :partial => 'item'
end

Once you've made all the necessary changes in your code, that's it. You're done. Now fire up your web server and browser and see how it works.