Topic: Transitioning your Rails JS from Prototype to JQuery, step-by-step

I started poking around for a quick step-by-step on how to change your JS library from Prototype to JQuery and found a few items, but they still took some manipulating.  Here are the steps if you want to try it yourself!

**disclaimer**  This works for transitioning rails 3 JS libraries from Prototype to JQuery.  Not sure if it works for rails 2.  Also, you can feel free to transition using a gem but I wanted to do it manually.

STEP 1 - Go to JQuery site and click on the download link (I chose the Development version.)  Your browser should pop up with a bunch of JQuery code.  Select all of the code and copy it.  Go to your text editor and paste it into a new file you created named "jquery" (no, you don't need the quotes in your filename.)  This file should be located in the public/javascripts directory of your rails app.

STEP 2 - Google "JQuery UJS, git".  You'll then see a link to the Git repository for the Rails (Unobtrusive Javascript) UJS adaptor.  Go there and click on the "src/" option in the project (it should be the first option.)   Then click on the file rails.js.  Like before, copy the contents of this file to your clipboard (clicking on the RAW tag to the top-right will load the file into your browser so you can 'select all' and copy.)  Now, navigate to your rails project and paste these contents into your rails.js file.  Be sure to DELETE the current contents of the rails.js file prior to pasting the new JQuery contents.

STEP 3 - Navigate to your config/application.rb file and uncomment the line "config.action_view.javascript_expansions[:defaults] = %w(jquery rails)".

And that's it!  You shouldn't need to mess with any other files to get this to work.  To test out your work, BE SURE TO RESTART YOUR WEB SERVER and load up a page with a delete button.  You'll see the button works as planned - if the delete button doesn't work, you messed up.  Also, if you view the source of the page, you'll notice that the JQuery library is loaded up.

One final note, you can remove all the files in your Javascripts directory except for the ones we just manipulated and the application.js file.  All the other ones refer to Prototype and Scriptaculous libraries.

Oh, if you have other functions that you built using Prototype, you can typically get them to work by: 1) adding a # in front of the CSS selector, and 2) replacing the Prototype method with the appropriate JQuery method.  For example, replacing Prototype's 'update' method with JQuery's 'html' (as easy as replacing the word .update with .html) ...

Ryanb's RAILSCASTS does an excellent job of explaining this.

Hope this helps!

Last edited by imacobrabuilder (2011-06-16 12:40:39)