jQuery - Boston Ruby Group (July '07)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Slide 16: Live Demo

Slide 17: Accordion Menu

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

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

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

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

Slide 22: Future • “jQuery UI” • Themeing • Internationalization

Slide 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

Slide 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

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

Slide 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: \"{attributes:{foo: \\\"bar\\\", baz: \\\"bat\\\"}}\" • Or you can get specific: \"{foo: \\\"bar\\\", baz: \\\"bat\\\"}\" @ar_object.attributes.to_json #=>

Slide 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

Slide 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

Slide 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>

Slide 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: $(\"a.remote\").click(function() { $(this.rel).load(this.href) })

Slide 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 => \"remote\", :rel => update) end • You could thenBaz\", {:controller => \"foo\", call it as: remote_link \"Update :action => \"bar\"}, \"#baz\"

Slide 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/

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