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

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 (20kb)
• 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...
• Full CSS 1-3 Support
• Basic XPath
• 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[div]”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

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

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

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

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

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

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

16. Live Demo

17. Accordion Menu

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

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

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

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

22. Future
• “jQuery UI”
• Themeing
• Internationalization

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

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

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

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

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

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

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

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

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

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

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