jQuery
+ Ruby + Rails
Boston Ruby Group - July 2007
John Resig (ejohn.org)
Download this:
http://dev.jquery.com/~john/files/apple-demo.zip

What is jQuery?
• An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.

Why jQuery?
• Fully documented
• Great community
• Tons of plugins
• Small size (20kb)
• Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+

Complete Focus:
• Find some elements
• Do something with them

Find Some Elements...
• Full CSS 1-3 Support
• Basic XPath
• Better CSS support than most browsers

$(“div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

$(“#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

$(“div > div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

$(“div[div]”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

Features
• Events (click, hover, toggle)
• DOM Manipulation (append, prepend, remove)
• Effects (hide, show, slideDown, fadeOut)
• AJAX (load, get, post)

Events
• $(“form input:last”).click(function(){
$(“#menu”).slideDown(“slow”);
});

DOM Manipulation
• $(“a[@target]”)
.append(“ (Opens in New Window)”);
• $(“#body”).css({
border: “1px solid green”,
height: “40px”
});

Effects
• $(“#menu”).slideDown(“slow”);
• $(“div”).hide(500,function(){
$(this).show(500);
});

AJAX
• $(“#body”).load(“sample.html”);
• $.getScript(“test.js”);

Chaining
• $(“div”).hide();
• $(“div”).hide().color(”blue”);
• $(“div”).hide().color(”blue”).slideDown();

Live Demo

Accordion Menu

Plugins
• Drag and Drop
• Sortables
• Tabbed Navigation
• Sortable Tables
• And hundreds more...

Community
• Very active mailing list
• 108+ Posts/Day
• 2500+ Members
• Technorati: 22+ blog posts per day

Who uses jQuery?
• IBM
• MSNBC
• Technorati
• Drupal
• Wordpress
• Digg
• many others...

Books
• 4 Books in Progress:
• Learning jQuery (Packt)
• jQuery Reference (Packt)
• jQuery Quickly (Manning)
• Designing with jQuery (Manning)

Future
• “jQuery UI”
• Themeing
• Internationalization

Using jQuery with Rails
• Most jQuery use is non different than
normal jQuery use
• $(“div”).remove(); // works on any site
• Considerations come in with dealing with
Ajax requests

Ajax and Rails
• Just another request to a controller/action
• You might want to respond like so:
respond_to do |format|
format.js { # do stuff }
end
• jQuery sends the right headers so you can
respond easily

Ajax with jQuery
• Typically, you’ll reply with an HTML chunk
• jQuery handles this gracefully:
$(“#stuff”).load(“controller/action”);

Reply with JSON
• Sometimes you’ll want to reply with a data
structure for further manipulation
• ActiveRecord objects have to_json
serialization built in:
\"{attributes:{foo: \\\"bar\\\", baz: \\\"bat\\\"}}\"
• Or you can get specific: \"{foo: \\\"bar\\\", baz: \\\"bat\\\"}\"
@ar_object.attributes.to_json #=>

Where does the JS go?
• jQuery dictates good separation of
content, style, and behavior
• Put all your code in application.js
• jQuery and Prototype can play nicely
together:
jQuery.noConflict();
jQuery(function($){ /* your code */ });
• More info in the docs

Where’s RJS?
• RJS says that sending back code (from the
server) is the best way to do things
• This is overkill, simplify and extract what
you’re trying to achieve

RJS v. jQuery-style
• With RJS: id=’myid’ onclick=”return someFunction
<a href=”#”
(‘myid’);”>text</a>
<a href=”#” id=’myid2’ onclick=”return someFunction
(‘myid2’);”>text</a>
• With jQuery:
<a href=”...” id=”myid”>text</a>
<a href=”...” id=”myid2”>text</a>
<script>$(“a”).click(someFunction);</script>

Helpers
• Say you have a link that makes an Ajax call
and updates some div with the response:
<a href='/foo/bar' rel='#baz' class='remote'>Update Baz</a>
• You might write a simple line of jQuery
code to handle it:
$(\"a.remote\").click(function() { $(this.rel).load(this.href) })

Helpers (cont.)
• You could then write a Rails helper to
reuse it:
def remote_link text, url_hash, update = nil
link_to(text, url_hash, :class => \"remote\", :rel => update)
end
• You could thenBaz\", {:controller => \"foo\",
call it as:
remote_link \"Update
:action => \"bar\"}, \"#baz\"

More info:
• jQuery with Rails:
• http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/
• http://yehudakatz.com/2007/05/18/railsconf-talk-recap/
• jQuery Rails Plugin:
• http://yehudakatz.com/2007/05/17/jquery-on-rails-a-fresh-approach/
• http://yehudakatz.com/2007/05/25/10/
• http://yehudakatz.com/2007/05/26/jquery-on-rails-a-still-very-alpha-update/

jquery.com
docs.jquery.com - jquery.com/plugins
More:
visualjquery.com
learningjquery.com