0
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+, Firefo...
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:has(div)”)
 <div id=”body”>
   <h2>Some Header</h2>
   <div class=”contents”>
       <p>...</p>
       <p>...</p>
 ...
Features

• Events (click, hover, toggle, namespaces)
• DOM Manipulation (append, prepend, remove)
• Effects%/em, colors) ...
Events


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

• $(“form input:last”).livequery(“click,
    function(){
      $(“#menu”).slideDown(“slow”);
    });
• With L...
DOM Manipulation

• $(“a[target]”)
        .append(“ (Opens in New Window)”);
• $(“#body”).css({
        border: “1px soli...
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(“ht...
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

•      ...
Books

• 4 Books in Progress:
 • Learning jQuery (Packt)
 • jQuery Reference (Packt)
 • jQuery Quickly (Manning)
 • Design...
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 an...
Ajax and Rails
• Just another request to a controller/action
• You might want to respond like so:
     respond_to do |form...
Ajax with jQuery


• Typically, you’ll reply with an HTML chunk
• jQuery handles this gracefully:
  $(“#stuff”).load(“/con...
Reply with JSON
• Sometimes you’ll want to reply with a data
   structure for further manipulation
• ActiveRecord objects ...
Where does the JS go?
• jQuery dictates good separation of
  content, style, and behavior
• Put all your code in applicati...
Where’s RJS?

• RJS says that sending back code (from the
  server) is the best way to do things
• This is overkill, simpl...
RJS v. jQuery-style
• With RJS: id=’myid’ onclick=”return someFunction
  <a href=”#”
   (‘myid’);”>text</a>
   <a href=”#”...
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...
Helpers (cont.)

• You could then write a Rails helper to
   reuse it:
   def remote_link text, url_hash, update = nil
   ...
You still have
your helpers :)
jQuery on Rails
• Mainly Proof-of-Concept
• Uses Hpricot to select jQuery snippets
• Includes (POC) helpers for
 • Tab fiel...
More info:
• jQuery with Rails:
  •   http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/

  •   http://yehudak...
jquery.com
docs.jquery.com - jquery.com/plugins
               More:
          visualjquery.com
        learningjquery.com
Upcoming SlideShare
Loading in...5
×

jQuery Presentation to Rails Developers

26,441

Published on

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

Published in: Technology
4 Comments
33 Likes
Statistics
Notes
No Downloads
Views
Total Views
26,441
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
862
Comments
4
Likes
33
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Presentation to Rails Developers"

  1. 1. jQuery + Ruby + Rails AppFolio - September 2007 Yehuda Katz (yehudakatz.com)
  2. 2. What is jQuery? • An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  3. 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. 4. Complete Focus: • Find some elements • Do something with them
  5. 5. Find Some Elements... • CSS 1-3 Support • Basic XPath via a Plugin • Better CSS support than most browsers
  6. 6. $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  7. 7. $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  8. 8. $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  9. 9. $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  10. 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. 11. Events • $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
  12. 12. Live Events • $(“form input:last”).livequery(“click, function(){ $(“#menu”).slideDown(“slow”); }); • With LiveQuery Official Plugin
  13. 13. DOM Manipulation • $(“a[target]”) .append(“ (Opens in New Window)”); • $(“#body”).css({ border: “1px solid green”, height: “40px” });
  14. 14. Effects • $(“#menu”).slideDown(“slow”); • $(“div”).hide(500,function(){ $(this).show(500); });
  15. 15. Relative Animations • $(“#foo”).animate({ left: “+50px” top: “-50px” }, “slow”)
  16. 16. AJAX • $(“#body”).load(“sample.html”); • $(“#body”).load(“sample.html #foo”); • $.getScript(“test.js”); • $.getScript(“http://jquery.com/jquery.js”);
  17. 17. Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); • $(“div”).hide().color(”blue”).slideDown();
  18. 18. Live Demo
  19. 19. Accordion Menu
  20. 20. Plugins • Drag and Drop • Sortables • Tabbed Navigation • Sortable Tables • And hundreds more... • http://jquery.com/plugins
  21. 21. Community • Very active mailing list • 140+ Posts/Day • 2500+ Members • Technorati: 22+ blog posts per day
  22. 22. Who uses jQuery? • • IBM BBC • • MSNBC SourceForge • • Amazon Intuit • • AOL Salesforce • • Technorati FeedBurner • • Drupal WB Records • • Wordpress Linux.com • • Digg many others...
  23. 23. Books • 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
  24. 24. Future • “jQuery UI” - Next Sunday! • Themeing • Internationalization
  25. 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. 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. 27. Ajax with jQuery • Typically, you’ll reply with an HTML chunk • jQuery handles this gracefully: $(“#stuff”).load(“/controller/action”);
  28. 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. 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. 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. 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. 32. jQuery & RJS • jQuery Doesn’t Agree with the philosophy that produced RJS • Send data, not code
  33. 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. 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. 35. You still have your helpers :)
  36. 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. 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. 38. jquery.com docs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×