Rails 3.0 and JQuery-UJS Rails.js

So there are a bunch of posts and a great Railscast about using Unobtrusive Javascript and Rails.
The rails cast even gives a great section about using JQuery instead of Prototype - and how there's a specific rails.js for JQuery. But I definitely had issues getting this going until today - so hence the blog entry and a mistake perhaps that is not published yet on other posts.

First some background.

So Rails 3.0 and below used to use a Javascript library called Prototype by default. This javascript library (like JQuery) allowed for some powerful javascript functionality with little code. However, I'm a JQuery guy, so I opted to use JQuery.

So the deal is, in my layout, I used a javascript_include_tag for JQuery so I could start using JQuery all over the place in my app. The issue? As soon as you use JQuery instead of Prototype, a bunch of stuff starts breaking - the biggest most obvious culprit? The Delete link.

In scaffolding or even in your own coding, you may write a link that looks like this:

<%= link_to "Delete", @resource, :method => delete, :confirm => "Are you sure? %>

Now the thing to know about this is - this generates a link with specific attributes. And its those attributes that identify it as a special link. What identifies it as a special link? rails.js

Rails.js will look at links like this - dynamically create a form around this link, and then submit it when you click on the link. That's why the replacing this with "button_to" solves the problem in one way. Because button_to creates that form for you, and doesn't rely on rails.js to create that form.

Now the problem is - the default rails.js that's included in Rails 3.0 and below relies on Prototype. So if you switch to using JQuery - the default rails.js isn't going to work.

This is where the Railscast gives a good explanation to hit up the jquery-ujs github account (just Google jquery-ujs and you'll find it), and download the rails.js that exists there.

In you application (probably) you're layout, if you use a javascript_include_tag to include both JQuery, and the jquery-ujs version of rails.js - you should be good to go.

(and believe me if you do the steps right - you will be good to go).

I, however, did not do the steps correctly.

I followed the logic and followed the instructions and still things were breaking.

What did I do wrong?

Something really stupid. I downloaded the jquery-ujs/rails.js file incorrectly. I was using my browser and just right-clicked and "Save link as...". The problem is - I wasn't downloading the raw source code file which is what you need. The best way to do this is when in Github, jquery-ujs, click on src, then click on "rails.js". Then click on the "RAW" button to grab the actual source file. This was the key.

So just in case anybody else runs into this issue, make sure the rails.js file you're getting is the true raw source code file.

Btw, for Rails 3.1 and above - you don't have to worry about this. Rails 3.1 made JQuery the default javascript library (instead of Prototype) - and as an added bonus, they by default include the "jquery-rails" gem in the Gemfile. This gem contains both JQuery and the Jquery-ujs Rails javascript files and it automatically serves them up through the asset pipeline.

So all the information was already out there - I just made a stupid mistake that maybe some of you might run into so I thought I'd blog about it.