Presentation to local Rails developers on jQuery. Based on a presentation by John Resig.

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

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

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

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

5. Find Some Elements...
• CSS 1-3 Support
• Basic XPath via a Plugin
• Better CSS support than most browsers

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

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

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

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

10. 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)

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

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

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

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

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

16. AJAX
• $(“#body”).load(“sample.html”);
• $(“#body”).load(“sample.html #foo”);
• $.getScript(“test.js”);
• $.getScript(“http://jquery.com/jquery.js”);

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

18. Live Demo

19. Accordion Menu

20. Plugins
• Drag and Drop
• Sortables
• Tabbed Navigation
• Sortable Tables
• And hundreds more...
• http://jquery.com/plugins

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

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

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

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

25. 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

26. 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

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

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

29. 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 */ });

30. 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

31. 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>

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

33. 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:
$(quot;a.remotequot;).click(function() { $(this.rel).load(this.href) })

34. 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 => quot;remotequot;, :rel => update)
end
• You could thenBazquot;, {:controller => quot;fooquot;,
call it as:
remote_link quot;Update
:action => quot;barquot;}, quot;#bazquot;

35. You still have
your helpers :)

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

37. 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/

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