jquery on rails presentation
TRANSCRIPT
![Page 1: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/1.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 1/89
write less.do more.
![Page 2: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/2.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 2/89
who are we?
![Page 3: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/3.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 3/89
Yehuda KatzAndy Delcambre
![Page 4: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/4.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 4/89
![Page 5: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/5.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 5/89
How is this going towork?
![Page 6: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/6.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 6/89
Introduction tojQuery
![Page 7: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/7.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 7/89
Event DrivenJavaScript
![Page 8: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/8.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 8/89
Labs!
![Page 9: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/9.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 9/89
Labs!git clone git://github.com/adelcambre/jquery-tutorial.
![Page 10: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/10.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 10/89
Introduction tojQuery
![Page 11: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/11.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 11/89
UJS With jQuery
h1 {
color: #999;
}
$(“h1”).click(fun
$(this).fadeIn(
});
![Page 12: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/12.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 12/89
get some elements.but how?
![Page 13: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/13.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 13/89
CSS 3 plus
•div
•div#foo
•div.class
•div, p, a
•div p
•div > p
•div + p
•div ~ p
•div:first
•div:last
•div:not(#foo)
•div:even
•div:odd
•div:eq(1)
•div:gt(1)
•div:lt(1)
•div:header
•div:animat
•div:contai
•div:empty
•div:has(p)
•div:parent
•div:hidden
•div:visibl
![Page 14: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/14.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 14/89
CSS 3 plus
•div[foo]
•div[foo=bar]
•div[foo!=bar]
•div[foo^=bar]
•div[foo$=bar]
•div[foo*=bar]
•:nth-child(2)
•:nth-child(even)
•:first-child
•:last-child
•:only-child
•:input
•:text
•:password
•:radio
•:checkbox
•:submit
•:image
•:reset
•:button
•:file
•:hidden
•:enabled
•:disabled
•:checked
•:selected
![Page 15: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/15.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 15/89
get some elements.
![Page 16: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/16.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 16/89
$(“table tr:nth-
child(even) > td:visibl
![Page 17: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/17.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 17/89
do stuff.
![Page 18: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/18.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 18/89
$(“div”)Returns jquery object
![Page 19: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/19.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 19/89
![Page 20: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/20.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 20/89
$(“div”).fadeIn().css(“color”, “green”
Returns jquery object
![Page 21: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/21.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 21/89
we call this chainin
![Page 22: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/22.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 22/89
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 ]
![Page 23: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/23.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 23/89
• 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
Lab 1: Selectors
![Page 24: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/24.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 24/89
5 parts of jquerydom
eventseffects
ajax
plugins
![Page 25: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/25.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 25/89
dom traversal$(“div”).parent();
$(“div”).siblings();
$(“div”).next();$(“div”).nextAll(“p”);
$(“div”).nextAll(“p:first”);
![Page 26: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/26.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 26/89
$(“div”)
<body>
<div>
<p> <p> <p>
<div> <pre>
<p> <p> <
![Page 27: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/27.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 27/89
$(“div#foo”).siblings
<body>
<div id='foo'>
<p> <p> <p>
<div> <pre>
<p> <p> <
![Page 28: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/28.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 28/89
$(“div”).next()
<body>
<div>
<p> <p> <p>
<div> <pre>
<p> <p> <
![Page 29: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/29.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 29/89
$(“div”).nextall(“p”)
<body>
<div id='foo'> <p> <p> <pre> <p>
![Page 30: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/30.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 30/89
$(“div”).nextall(“p:rs
<body>
<div id='foo'> <p> <p> <pre> <p
![Page 31: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/31.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 31/89
nd$(“div pre”)
$(“div”).find(“pre”)
![Page 32: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/32.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 32/89
$(“div pre”)
<body>
<div>
<p> <pre> <pre>
<div> <pre>
<p> <pre> <
![Page 33: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/33.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 33/89
$(“div”).nd(“pre”)
<body>
<div>
<p> <pre> <pre>
<div> <pre>
<p> <pre> <
![Page 34: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/34.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 34/89
lter$(“div:contains(some text)”)
$(“div”).filter(“:contains(some text)”)
$(“div”).filter(function() {
return $(this).text().match(“some text”)
})
![Page 35: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/35.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 35/89
andSelf()$(“div”).siblings().andSelf()
$(“div”).parent().andSelf()
![Page 36: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/36.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 36/89
$(“div”).siblings().andse
<body>
<div id='foo'>
<p> <p> <p>
<div> <pre>
<p> <p> <
![Page 37: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/37.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 37/89
![Page 38: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/38.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 38/89
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
![Page 39: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/39.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 39/89
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”);
![Page 40: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/40.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 40/89
classes$(“div”).addClass(“foo”)
$(“div”).removeClass(“foo”)
$(“div”).toggleClass(“foo”)
$(“div”).hasClass(“foo”)
![Page 41: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/41.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 41/89
other$(“div”).html()
$(“div”).html(“<p>Hello</p>”)
$(“div”).text()
$(“div”).text(“Hello”)
$(“div”).val()
$(“div”).val(“Hello”)
![Page 42: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/42.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 42/89
noticing a pattern?
![Page 43: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/43.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 43/89
manipulation$(“div”).append(“<p>Hello</p>”)
$(“<p>Hello</p>”).appendTo(“div”)
$(“div”).after(“<p>Hello</p>”)
$(“<p>Hello</p>”).insertAfter(“div”)
![Page 44: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/44.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 44/89
way more...http://docs.jquery.com
http://api.jquery.com
![Page 45: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/45.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 45/89
Lab 3: Manipulation
•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
Note: Use the Lab 2 File again
![Page 46: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/46.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 46/89
5 parts of jquerydom
![Page 47: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/47.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 47/89
document ready$(document).ready(function() { ... })
Alias: jQuery(function($) { ... })
![Page 48: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/48.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 48/89
bind$(“div”).bind(“click”, function() { ... })
Alias: $(“div”).click(function() { ... })
![Page 49: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/49.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 49/89
“this”refers to the element bound
![Page 50: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/50.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 50/89
e$(“div”).click(function(e) { ... })
corrected event obje
![Page 51: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/51.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 51/89
corrected event obje
![Page 52: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/52.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 52/89
trigger$(“div”).trigger(“click”)
Alias: $(“div”).click()
![Page 53: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/53.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 53/89
triggerHandlerdoesn’t trigger the browser’s default actions
![Page 54: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/54.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 54/89
custom events$(“div”).bind(“myEvent”, function() { ... })
$(“div”).trigger(“myEvent”)
![Page 55: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/55.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 55/89
hover$(“div”).hover(function() { ... }, function() { ..
![Page 56: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/56.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 56/89
toggle$(“div”).toggle(function() { ... }, function() { .
![Page 57: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/57.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 57/89
live$(“div”).live(“click”, function() { ... })
![Page 58: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/58.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 58/89
5 parts of jquery
events
![Page 59: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/59.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 59/89
Fades$(“div”).fadeIn()
$(“div”).fadeOut(“slow”)
![Page 60: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/60.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 60/89
slides$(“div”).slideUp(200)
$(“div”).slideDown(“slow”)
![Page 61: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/61.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 61/89
animate$(“div”).animate({height: “toggle”, opacity: “toggl
$(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easin
Lab 4: Events and Effec
![Page 62: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/62.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 62/89
Lab 4: Events and Effec
• Fade out all of the divs
•Make each img grow when you mouseover them (and again after you leave)
•Make clicking an li collapse the sub list
Note: Use the Lab 2 File again
![Page 63: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/63.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 63/89
5 parts of jquery
effects
![Page 64: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/64.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 64/89
make easy things eas$(“div”).load(“some_url”);
$(“div”).load(“some_url”, {data: “foo”},
function(text) { ... });
![Page 65: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/65.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 65/89
it’s easy to do it righ$.getJSON(“some_url”, function(json) { ... })
$.getJSON(“some_url”, {data: “foo”},
function(json) { ... })
![Page 66: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/66.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 66/89
it’s consistent$.get(“some_url”, function(text) { ... })
$.post(“some_url”, {data: “foo”},
function(text) { ... })
and powerful
![Page 67: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/67.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 67/89
and powerful
•async•beforeSend
•cache
•complete
•contentType
•data•dataType
•error
•global• ifModied
•jsonp
•processData
•success
•timeout•type
$.ajax Options
and powerful
![Page 68: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/68.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 68/89
and powerful
/* 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() { ... });
global ajax settings
![Page 69: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/69.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 69/89
5 parts of jquery
ajax
![Page 70: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/70.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 70/89
there are hundreds
![Page 71: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/71.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 71/89
which are important
jquery ui
![Page 72: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/72.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 72/89
jquery ui
•Draggables
•Droppables
• Sortables
• Selectables
•Resizables
•Accordion
•Date Picker
•Dialog
• Slider
•Tabs
Widg
Primitives
http://ui.jq
![Page 73: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/73.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 73/89
jquery formsajaxify a form in one easy step:
$(“form.remote”).ajaxForm()
http://www.malsup.com/jq
![Page 74: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/74.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 74/89
form validationspecify validation rules in your markup
http://bassistance.deplugins/jquery-plugin-v
![Page 75: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/75.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 75/89
metadata pluginspecify metadata for elements in markup
<div data=”{some: ‘data’}”>$(“div”).metadata().some // returns ‘data’
http://jqueryjs.googlecotrunk/plugins/meta
![Page 76: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/76.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 76/89
Event DrivenJavaScript
![Page 77: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/77.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 77/89
http://github.com/wycats/blue-ridge
![Page 78: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/78.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 78/89
jQuery on Rails
![Page 79: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/79.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 79/89
jQuery and RJS
![Page 80: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/80.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 80/89
Rails 3
![Page 81: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/81.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 81/89
Ajax and Rails$.getJSON(“/rails/action”)
![Page 82: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/82.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 82/89
Ajax and Railsrespond_to do |format| format.json {
render :json => obj }end
![Page 83: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/83.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 83/89
link to remotelink_to_remote "Delete this post",
:update => "posts",
:url => { :action => "destroy",:id => post.id }
![Page 84: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/84.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 84/89
link_to "Delete this post",url(:action => "destroy",
:id => post.id),:rel => "#posts"
link_to_remote
![Page 85: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/85.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 85/89
$(‘a.remote’).live(“click”, function() {$(this.rel).load(this.href)
});
link_to_remote
![Page 86: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/86.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 86/89
<% form_remote_tag :url => ...,:update => “res” do -%>
<% form_tag :url => ...,:rel => “#res” do -%>
form_remote_tag
![Page 87: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/87.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 87/89
$(‘form’).each(function() {$(this).ajaxForm({ target: this.rel })
})
form_remote_tag
observe eld
![Page 88: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/88.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 88/89
observe_eld
<%=observe_field :suggest,:url => {:action => :find },
:frequency => 0.25, :update => :suggest, :with => 'q'%>
var lastTime = new Date;$('#suggest').live(“keyup”, function if(new Date - lastTime var field = $('#sugges var url = field.attr( field.load(url,
{q: field.val()});}lastTime = new Date;
});
![Page 89: jQuery on Rails Presentation](https://reader034.vdocuments.mx/reader034/viewer/2022051201/577ce47d1a28abf1038e7826/html5/thumbnails/89.jpg)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 89/89
periodically_call_rem
periodically_call_remote( :url => {
:action => 'avgs' },:update => 'avg',
:frequency => '20')
setInterval(functi $('#avg')
.load('/some/a}, 20000);