jQuery on Rails: Why Bother?

A few people have suggested that I post about how to use jQuery with Rails. I thought about it and felt that others have already covered it quite well but why not collect their posts here for you to enjoy, right? Plus, I do all my JavaScript from scatch so I do not really ever use the helpers Rails provides and as such could not post intelligently on them.

So John, When Did You Quit Prototype?

I haven’t! I do not intend to ever quit using Prototype. Honestly, I have used jQuery quite a bit less than Prototype. I have found that jQuery and Prototype are both great and in different situations I will use a different library. The one thing I will say is even if you don’t actually switch to jQuery, I think it is important to learn new things and stretch yourself. It is good to feel frustrated and like a beginner. Also, jQuery takes a very different approach which has actually helped me write better Prototype code. Hope this is helpful and not overwhelming. :)

Creating A Plugin

Today, I wrote an article on How to Create a jQuery Plugin From Scratch over on my Addicted To New site. I picked out the most basic thing a plugin could do and explained each step in a lot of detail. Give it a read if you are into Prototype but are curious about jQuery.

Live Search and Fancy Zooming

After creating my live search with quicksilver for prototype example, I decided to port it to jQuery (view demo). Then, humbly, I was corrected by the jQuery man himself, John Resig, who re-ported my port in a more jQuery-ish functional style. For those that are curious, I also massaged the AJAX-RDoc project to use quicksilver searching. This is really helpful when you can’t quite remember a method name.

Likewise, when I created fancy zoom for prototype, my partner in crime, Steve Smith, created a port of fancy zoom for jQuery (view demo). Fancy Zoom is great for showing text and images with an Apple-esque, in page zoom transition or even Flash if you have a video you would like to feature.

jQuery Railscast

Ryan Bates did an awesome job showing how to use the jQuery on Rails plugin with Rails in a recent screencast. He also gave a really quick example on how to create a plugin. I would recommend watching this and subscribing to his Railscasts, which are great.

jRails Plugin

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. Ryan shows how to use it in the screencast mentioned above, but I thought I would also mention it separately. If you are a fan of the Rails javascript/ajax helpers, this plugin is for you. It makes each of them work with jQuery and has some nice demos on the site.

Link Love

While dispelling the myth that Rails is tied to Prototype, DHH gave some jQuery examples.

Brandon showed how he includes the authenticity token using prototype and the pug automatic shows how to do the same using jQuery.

Ben Curtis has a tutorial on how to do drag and drop sorting with jQuery and Rails.

Yehuda Katz has a year old presentation on jQuery and Rails that is still worth a look.

Nutrun has a more full post on how to do unobtrusive ajax with jQuery and Rails

ErrTheBlog (errtheblog is dead. long live errtheblog!) gave jQuery some serious love a while back in their jSkinny article. Chris also created a plugin named Facebox that is used extensively on GitHub and has a short post that shows how to get jQuery working with respond_to.

If you are a fan of Low Pro, Dan Webb has created a port of Low Pro for jQuery. (article #1, article #2)

In some Rails Rumble observations, it was noted that jQuery was more widely used than Prototype.

Don’t forget that “jQuery UI provides abstractions for low-level interaction and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.” Be sure to check out the demos.

If you are a fan of Twitter, you can follow jQuery for links to articles and such.

Nathan Smith gave a crash course on jQuery that includes a sweet airline seat demo.

jQuery does not come with all of Prototype’s functionality out of the box, but you can usually find a plugin that does what you need if you are too lazy to make something yourself.

Lastly, one of my favorite jQuery resources is Visual jQuery. I found this site a blessing when I was trying to learn jQuery.

Feel free to post your favorite jQuery/Rails resources as a comment below.