jQuery%20on%20Rails%20Presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery%20on%20Rails%20Presentation

on

  • 1,518 views

 

Statistics

Views

Total Views
1,518
Views on SlideShare
1,518
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery%20on%20Rails%20Presentation Presentation Transcript

  • 1. write less. do more.
  • 2. who are we?
  • 3. Yehuda Katz Andy Delcambre
  • 4. How is this going to work?
  • 5. Introduction to jQuery
  • 6. Event Driven JavaScript
  • 7. Labs!
  • 8. Labs! git clone git://github.com/adelcambre/jquery-tutorial.git
  • 9. Introduction to jQuery
  • 10. h1 { color: #999; } UJS With jQuery $(“h1”).click(function() { $(this).fadeIn(); });
  • 11. get some elements. but how?
  • 12. CSS 3 plus • div • div:first • div:header • div#foo • div:last • div:animated • div.class • div:not(#foo) • div:contains(txt) • div, p, a • div:even • div:empty • div p • div:odd • div:has(p) • div > p • div:eq(1) • div:parent • div + p • div:gt(1) • div:hidden • div ~ p • div:lt(1) • div:visible
  • 13. CSS 3 plus • div[foo] • :last-child • :reset • div[foo=bar] • :only-child • :button • div[foo!=bar] • :input • :file • div[foo^=bar] • :text • :hidden • div[foo$=bar] • :password • :enabled • div[foo*=bar] • :radio • :disabled • :nth-child(2) • :checkbox • :checked • :nth-child(even) • :submit • :selected • :first-child • :image
  • 14. get some elements.
  • 15. $(“table tr:nth- child(even) > td:visible”)
  • 16. do stuff.
  • 17. $(“div”) Returns jquery object
  • 18. $(“div”).fadeIn() Returns jquery object
  • 19. $(“div”).fadeIn() .css(“color”, “green”) Returns jquery object
  • 20. we call this chaining
  • 21. Crazy chains $(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]
  • 22. Lab 1: Selectors •Select every other row of the table • Select the Checked checkboxes • Select the first column of the table • Select the top level of the outline • Select any links to jquery.com • Select any images that contain flowers
  • 23. 5 parts of jquery dom events effects ajax plugins
  • 24. dom traversal $(“div”).parent(); $(“div”).siblings(); $(“div”).next(); $(“div”).nextAll(“p”); $(“div”).nextAll(“p:first”); dom
  • 25. $(“div”) <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  • 26. $(“div#foo”).siblings() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  • 27. $(“div”).next() <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  • 28. $(“div”).nextall(“p”) <body> <div id='foo'> <p> <p> <pre> <p> dom
  • 29. $(“div”).nextall(“p: rst”) <body> <div id='foo'> <p> <p> <pre> <p> dom
  • 30. nd $(“div pre”) $(“div”).find(“pre”) dom
  • 31. $(“div pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom
  • 32. $(“div”). nd(“pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom
  • 33. lter $(“div:contains(some text)”) $(“div”).filter(“:contains(some text)”) $(“div”).filter(function() { return $(this).text().match(“some text”) }) dom
  • 34. andSelf() $(“div”).siblings().andSelf() $(“div”).parent().andSelf() dom
  • 35. $(“div”).siblings().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  • 36. $(“p”).parent().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  • 37. Lab 2: Traversal • Select any text areas and their labels • Any span’s parent • All of the form elements from a form that PUT’s
  • 38. attributes $(“div”).attr(“id”) // returns id $(“div”).attr(“id”, “hello”) // sets id to hello $(“div”).attr(“id”, function() { return this.name }) $(“div”).attr({id: “foo”, name: “bar”}) $(“div”).removeAttr(“id”); dom
  • 39. classes $(“div”).addClass(“foo”) $(“div”).removeClass(“foo”) $(“div”).toggleClass(“foo”) $(“div”).hasClass(“foo”) dom
  • 40. other $(“div”).html() $(“div”).html(“<p>Hello</p>”) $(“div”).text() $(“div”).text(“Hello”) $(“div”).val() $(“div”).val(“Hello”) dom
  • 41. noticing a pattern?
  • 42. manipulation $(“div”).append(“<p>Hello</p>”) $(“<p>Hello</p>”).appendTo(“div”) $(“div”).after(“<p>Hello</p>”) $(“<p>Hello</p>”).insertAfter(“div”) dom
  • 43. way more... http://docs.jquery.com http://api.jquery.com dom
  • 44. Lab 3: Manipulation Note: Use the Lab 2 File again • Add CSS4 to the list after CSS3 • Remove any images with Dogs • Turn the ruby row red • Add some default text to the input field
  • 45. 5 parts of jquery dom events effects ajax plugins
  • 46. document ready $(document).ready(function() { ... }) Alias: jQuery(function($) { ... })
  • 47. bind $(“div”).bind(“click”, function() { ... }) Alias: $(“div”).click(function() { ... })
  • 48. “this” bound refers to the element
  • 49. e $(“div”).click(function(e) { ... })
  • 50. corrected event object Property Correction target The element that triggered the event (event delegation) relatedTarget The element that the mouse is moving in (or out) of pageX/Y The mouse cursor relative to the document which mouse: 1 (left) 2 (middle) 3 (right) keypress: The ASCII value of the text input metaKey Control on Windows and Apple on OSX
  • 51. trigger $(“div”).trigger(“click”) Alias: $(“div”).click()
  • 52. triggerHandler doesn’t trigger the browser’s default actions
  • 53. custom events $(“div”).bind(“myEvent”, function() { ... }) $(“div”).trigger(“myEvent”)
  • 54. hover $(“div”).hover(function() { ... }, function() { ... })
  • 55. toggle $(“div”).toggle(function() { ... }, function() { ... })
  • 56. 1.3 live $(“div”).live(“click”, function() { ... })
  • 57. 5 parts of jquery dom events effects ajax plugins
  • 58. Fades $(“div”).fadeIn() $(“div”).fadeOut(“slow”)
  • 59. slides $(“div”).slideUp(200) $(“div”).slideDown(“slow”)
  • 60. animate $(“div”).animate({height: “toggle”, opacity: “toggle”}) $(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})
  • 61. Lab 4: Events and Effects Note: Use the Lab 2 File again • Fade out all of the divs • Make each img grow when you mouseover them (and shrink again after you leave) • Make clicking an li collapse the sub list
  • 62. 5 parts of jquery dom events effects ajax plugins
  • 63. make easy things easy $(“div”).load(“some_url”); $(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });
  • 64. it’s easy to do it right $.getJSON(“some_url”, function(json) { ... }) $.getJSON(“some_url”, {data: “foo”}, function(json) { ... })
  • 65. it’s consistent $.get(“some_url”, function(text) { ... }) $.post(“some_url”, {data: “foo”}, function(text) { ... })
  • 66. and powerful $.ajax Options • async • global • beforeSend • ifModi ed • cache • jsonp • complete • processData • contentType • success • data • timeout • dataType • type • error
  • 67. and powerful global ajax settings /* No Ajax requests exist, and one starts */ $(“div.progress”).ajaxStart(function() { $(this).show() }); /* The last Ajax request stops */ $(“div.progress”).ajaxStop(function() { $(this).hide() }); /* Any Ajax request is sent */ $(“p”).ajaxSend(function() { ... }); /* Any Ajax request completes (success or failure) */ $(“div”).ajaxComplete(function() { ... }); /* Any Ajax request errors out */ $(“div”).ajaxError(function() { ... }); /* Any Ajax request succeeds */ $(“div”).ajaxSucccess(function() { ... });
  • 68. 5 parts of jquery dom events effects ajax plugins
  • 69. there are hundreds
  • 70. which are important?
  • 71. jquery ui • Draggables • Accordion • Droppables • Date Picker • Sortables • Dialog • Selectables • Slider Widgets • Resizables • Tabs Primitives http://ui.jquery.com
  • 72. jquery one easy step: ajaxify a form in forms $(“form.remote”).ajaxForm() http://www.malsup.com/jquery/form/
  • 73. form validation specify validation rules in your markup http://bassistance.de/jquery- plugins/jquery-plugin-validation/
  • 74. BASE metadata plugin specify metadata for elements in markup <div data=”{some: ‘data’}”> $(“div”).metadata().some // returns ‘data’ http://jqueryjs.googlecode.com/svn/ trunk/plugins/metadata/
  • 75. Event Driven JavaScript
  • 76. http://github.com/ wycats/blue-ridge
  • 77. jQuery on Rails
  • 78. jQuery and RJS
  • 79. Rails 3
  • 80. Ajax and Rails $.getJSON(“/rails/action”)
  • 81. Ajax and Rails respond_to do |format| format.json { render :json => obj } end
  • 82. link_to_remote link_to_remote "Delete this post", :update => "posts", :url => { :action => "destroy", :id => post.id }
  • 83. link_to_remote link_to "Delete this post", url(:action => "destroy", :id => post.id), :rel => "#posts"
  • 84. link_to_remote $(‘a.remote’).live(“click”, function() { $(this.rel).load(this.href) });
  • 85. form_remote_tag <% form_remote_tag :url => ..., :update => “res” do -%> <% form_tag :url => ..., :rel => “#res” do -%>
  • 86. form_remote_tag $(‘form’).each(function() { $(this).ajaxForm({ target: this.rel }) })
  • 87. observe_ eld <%= var lastTime = new Date; observe_field :suggest, $('#suggest') :url => { .live(“keyup”, function() { :action => :find }, if(new Date - lastTime > 250) { :frequency => 0.25, var field = $('#suggest'); :update => :suggest, var url = field.attr('rel'); :with => 'q' field.load(url, %> {q: field.val()}); } lastTime = new Date; });
  • 88. periodically_call_remote periodically_call_remote( setInterval(function() { :url => { $('#avg') :action => 'avgs' }, .load('/some/avgs'); :update => 'avg', }, 20000); :frequency => '20')