Replace Prototype with JQuery on Rails

Author: Jimmy

14 Jan

Looking for Prototype/script.aculo.us replacement on Rails? jRails project can be an answer if you prefer JQuery. Here is info from project site:

Features

jRails provides drop-in functionality for these existing Rails methods.

Prototype

form_remote_for
form_remote_tag
link_to_remote
observe_field
observe_form
periodically_call_remote
remote_form_for
submit_to_remote

Scriptaculous

draggable_element
drop_receiving_element
sortable_element
visual_effect

RJS

hide
insert_html
remove
replace
replace_html
show
toggle

Visual Effects

The visual effects in jRails are based on the new jquery-fx library. jRails currently uses a slightly modified version of jquery fx code to get some of the desired effects. This code is evolving and is subject to change. In the meatime, you can get a taste of the visual effects that are currently available.

Appear, Fade, Puff, BlindDown, BlindUp, BlindRight, BlindLeft, SwitchOff, SwitchOn, SlideDown, SlideUp, DropIn, DropOut, Shake, Pulsate, Squish, Fold, FoldOut, Grow, Shrink, Highlight

How to use

Just install and go! Once installed, the previous Prototype/script.aculo.us helpers will be replaced by jQuery ones. In order for them to function correctly, just include the appropriate javascript files in the head of your page.

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js" type="text/javascript"></script>
<script src="/javascripts/jquery-fx.js" type="text/javascript"></script>
<script src="/javascripts/jrails.js" type="text/javascript"></script>
<script src="/javascripts/jrails.js" type="text/javascript"></script>

You can also use the Rails javascript_include_tag helper with :default to load them automagically.

1	<%= javascript_include_tag :defaults %>

Install

To install the jRails plugin:

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

Then copy the javascript files in the plugin folder to your javascripts directory.

Recommended Reading: This site recommends Website Magazine for 'Net Success

Don't forget to subscribe so you don't miss out on future posts!

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.

Filed under: Ajax - JavaScript, JQuery, Ruby on Rails

7 Responses for "Replace Prototype with JQuery on Rails"

Scott Stawarz January 23rd, 2008 at 10:56 am 1

I’ve used both jquery and prototype. I like them both for their own reasons. Besides my own opinion, Can you answer Why would you want to swap in jquery? What’s the benefit?

Thanks,
marcus derencius January 23rd, 2008 at 12:18 pm 2

scott,

jquery has more plugins than prototype. at least for my use. and with jquery you can easly make your js unobstrusive.

jquery has jquery ui, it will be very cool thing.
Finn Higgins January 23rd, 2008 at 4:00 pm 3

jQuery is good, but I don’t think it needs helpers in Rails for new projects - all that inline Javascript is a bad thing, and very much non-idiomatic for jQuery.

It’d be fine for a legacy project, but for a new Ajax project I’d be inclined to just define classes and IDs and attach behavior instead.
Jordan Fowler April 29th, 2008 at 11:37 am 4

I agree with Finn, the point of jQuery is to be as unobtrusive as possible. If you really want to use jQuery as it is intended, I suggest deleting the standard *.js files in Rails and installing jQuery. Then completely stop using the helpers.

Of course, this is only possible with small or new projects.
Ryan October 14th, 2008 at 2:46 am 5

jQuery is super easy and fun, why helpers?

Ryan
http://12tb.com
Paolo November 6th, 2008 at 3:27 am 6

Why helpers? This code is from one of my projects

‘vacation_types’,
:html => {:class => “margin”},
:url => {:action => ‘create’, [etc] }) %>

[etc]

Do I really want to code those forms in JavaScript every time I need one? Helpers are a time saver.
Paolo November 6th, 2008 at 3:29 am 7

The blog sw had fun with my code. I try again without angulars and percents

form_remote_tag(:update => ‘vacation_types’, :html => {:class => “margin”},
:url => {:action => ‘create’, [etc] })
text_field_tag ‘name’
[etc]
/form