jQuery
+ Ruby + Rails
AppFolio - September 2007
Yehuda Katz (yehudakatz.com)

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 (14kb)
• Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+

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

Find Some Elements...
• CSS 1-3 Support
• Basic XPath via a Plugin
• 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:has(div)”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

Features
• Events (click, hover, toggle, namespaces)
• DOM Manipulation (append, prepend, remove)
• Effects%/em, colors) slideDown, fadeOut, stop, relative,
(hide, show,
queues,
• AJAX (load, get, post, XD, JSONP)

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

Live Events
• $(“form input:last”).livequery(“click,
function(){
$(“#menu”).slideDown(“slow”);
});
• With LiveQuery Official Plugin

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);
});

Relative Animations
• $(“#foo”).animate({
left: “+50px”
top: “-50px”
}, “slow”)

AJAX
• $(“#body”).load(“sample.html”);
• $(“#body”).load(“sample.html #foo”);
• $.getScript(“test.js”);
• $.getScript(“http://jquery.com/jquery.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...
• http://jquery.com/plugins

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

Who uses jQuery?
• •
IBM BBC
• •
MSNBC SourceForge
• •
Amazon Intuit
• •
AOL Salesforce
• •
Technorati FeedBurner
• •
Drupal WB Records
• •
Wordpress Linux.com
• •
Digg many others...

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

Future
• “jQuery UI” - Next Sunday!
• Themeing
• Internationalization

Using jQuery with Rails
• Most jQuery use is not different than
normal jQuery use
• $(“div”).remove(); // works on any site
• Considerations come mainly 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 (just like
style.css)
• jQuery and Prototype can play nicely
together:
jQuery.noConflict();
jQuery(function($){ /* your code */ });

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>

jQuery & RJS
• jQuery Doesn’t Agree with the philosophy
that produced RJS
• Send data, not code

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\"

You still have
your helpers :)

jQuery on Rails
• Mainly Proof-of-Concept
• Uses Hpricot to select jQuery snippets
• Includes (POC) helpers for
• Tab field
• Sortable table
• More coming

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