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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,761
On Slideshare
1,761
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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')