How to replace Prototype with jQuery in Rails

An article by Pedro Sampaio    No Comments

One of the first thing I do when I create a new Rails application is to replace Prototype with jQuery. Quoting from a post in the Thoughtbot blog:

For our front-end behavior we’re using jQuery. The ecosystem around jQuery Core, jQuery UI, and the slew of third-party plugins help bring life to our applications. Using jQuery also gives us an easy transition for mobile web app development with tools like jQTouch. jQuery replaces prototype/scriptaculous in suspenders.

Furthermore, starting from Rails 3, we now get Unobtrusive Javascript. This means that rails no longer outputs Javascript inline, but rather outputs the new HTML5 data attributes, which the Javascript frameworks can use to do their thing.

So, here’s how you go about using jQuery. First, get a local copy of the files.

$ curl -L http://code.jquery.com/jquery-1.4.2.min.js > public/javascripts/jquery.js
$ curl -L http://github.com/rails/jquery-ujs/raw/master/src/rails.js > public/javascripts/rails.js

Then we use an initializer by Yehuda Katz, that loads jQuery as the default javascript framework. Just create a jQuery.rb file in config/initializers, and paste this code into it:

module ActionView::Helpers::AssetTagHelper
  remove_const :JAVASCRIPT_DEFAULT_SOURCES
  JAVASCRIPT_DEFAULT_SOURCES = %w(jquery.js rails.js)

  reset_javascript_include_default
end

Just make sure you include csrf_meta_tag in your layout and you’re ready to go!