jquery%20on%20rails%20presentation
TRANSCRIPT
![Page 1: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/1.jpg)
write less.do more.
![Page 2: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/2.jpg)
who are we?
![Page 3: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/3.jpg)
Yehuda KatzAndy Delcambre
![Page 4: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/4.jpg)
![Page 5: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/5.jpg)
How is this going to work?
![Page 6: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/6.jpg)
Introduction tojQuery
![Page 7: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/7.jpg)
Event DrivenJavaScript
![Page 8: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/8.jpg)
Labs!
![Page 9: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/9.jpg)
Labs!git clone git://github.com/adelcambre/jquery-tutorial.git
![Page 10: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/10.jpg)
Introduction tojQuery
![Page 11: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/11.jpg)
UJS With jQuery
h1 { color: #999;}
$(“h1”).click(function() { $(this).fadeIn();});
![Page 12: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/12.jpg)
get some elements.but how?
![Page 13: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/13.jpg)
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:animated
•div:contains(txt)
•div:empty
•div:has(p)
•div:parent
•div:hidden
•div:visible
![Page 14: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/14.jpg)
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%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/15.jpg)
get some elements.
![Page 16: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/16.jpg)
$(“table tr:nth-child(even) > td:visible”)
![Page 17: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/17.jpg)
do stuff.
![Page 18: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/18.jpg)
$(“div”)Returns jquery object
![Page 19: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/19.jpg)
$(“div”).fadeIn()Returns jquery object
![Page 20: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/20.jpg)
$(“div”).fadeIn().css(“color”, “green”)
Returns jquery object
![Page 21: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/21.jpg)
we call this chaining
![Page 22: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/22.jpg)
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%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/23.jpg)
• 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%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/24.jpg)
5 parts of jquerydom
events
effects
ajax
plugins
![Page 25: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/25.jpg)
dom traversal$(“div”).parent();$(“div”).siblings();$(“div”).next();$(“div”).nextAll(“p”);$(“div”).nextAll(“p:first”);
dom
![Page 26: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/26.jpg)
dom
$(“div”)
<body>
<div>
<p> <p> <p>
<div> <pre>
<p> <p> <p>
![Page 27: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/27.jpg)
dom
$(“div#foo”).siblings()
<body>
<div id='foo'>
<p> <p> <p>
<div> <pre>
<p> <p> <p>
![Page 28: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/28.jpg)
dom
$(“div”).next()
<body>
<div>
<p> <p> <p>
<div> <pre>
<p> <p> <p>
![Page 29: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/29.jpg)
dom
$(“div”).nextall(“p”)
<body>
<div id='foo'> <p> <p> <pre> <p>
![Page 30: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/30.jpg)
dom
$(“div”).nextall(“p:!rst”)
<body>
<div id='foo'> <p> <p> <pre> <p>
![Page 31: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/31.jpg)
!nd$(“div pre”)$(“div”).find(“pre”)
dom
![Page 32: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/32.jpg)
dom
$(“div pre”)
<body>
<div>
<p> <pre> <pre>
<div> <pre>
<p> <pre> <p>
![Page 33: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/33.jpg)
dom
$(“div”).!nd(“pre”)
<body>
<div>
<p> <pre> <pre>
<div> <pre>
<p> <pre> <p>
![Page 34: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/34.jpg)
!lter$(“div:contains(some text)”)$(“div”).filter(“:contains(some text)”)
$(“div”).filter(function() { return $(this).text().match(“some text”)})
dom
![Page 35: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/35.jpg)
andSelf()$(“div”).siblings().andSelf()$(“div”).parent().andSelf()
dom
![Page 36: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/36.jpg)
dom
$(“div”).siblings().andself()
<body>
<div id='foo'>
<p> <p> <p>
<div> <pre>
<p> <p> <p>
![Page 37: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/37.jpg)
dom
$(“p”).parent().andself()
<body>
<div id='foo'>
<p> <p> <p>
<div> <pre>
<p> <p> <p>
![Page 38: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/38.jpg)
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%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/39.jpg)
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
![Page 40: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/40.jpg)
classes$(“div”).addClass(“foo”)
$(“div”).removeClass(“foo”)
$(“div”).toggleClass(“foo”)
$(“div”).hasClass(“foo”)
dom
![Page 41: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/41.jpg)
other$(“div”).html()
$(“div”).html(“<p>Hello</p>”)
$(“div”).text()
$(“div”).text(“Hello”)
$(“div”).val()
$(“div”).val(“Hello”)
dom
![Page 42: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/42.jpg)
noticing a pattern?
![Page 43: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/43.jpg)
manipulation$(“div”).append(“<p>Hello</p>”)
$(“<p>Hello</p>”).appendTo(“div”)
$(“div”).after(“<p>Hello</p>”)
$(“<p>Hello</p>”).insertAfter(“div”)
dom
![Page 44: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/44.jpg)
way more...http://docs.jquery.com
http://api.jquery.com
dom
![Page 45: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/45.jpg)
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%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/46.jpg)
5 parts of jquerydom
events
effects
ajax
plugins
![Page 47: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/47.jpg)
document ready$(document).ready(function() { ... })
Alias: jQuery(function($) { ... })
![Page 48: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/48.jpg)
bind$(“div”).bind(“click”, function() { ... })
Alias: $(“div”).click(function() { ... })
![Page 49: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/49.jpg)
“this”refers to the element bound
![Page 50: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/50.jpg)
e$(“div”).click(function(e) { ... })
![Page 51: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/51.jpg)
corrected event objectProperty 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
![Page 52: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/52.jpg)
trigger$(“div”).trigger(“click”)Alias: $(“div”).click()
![Page 53: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/53.jpg)
triggerHandlerdoesn’t trigger the browser’s default actions
![Page 54: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/54.jpg)
custom events$(“div”).bind(“myEvent”, function() { ... })
$(“div”).trigger(“myEvent”)
![Page 55: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/55.jpg)
hover$(“div”).hover(function() { ... }, function() { ... })
![Page 56: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/56.jpg)
toggle$(“div”).toggle(function() { ... }, function() { ... })
![Page 57: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/57.jpg)
live$(“div”).live(“click”, function() { ... })
1.3
![Page 58: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/58.jpg)
5 parts of jquerydom
events
effects
ajax
plugins
![Page 59: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/59.jpg)
Fades$(“div”).fadeIn()
$(“div”).fadeOut(“slow”)
![Page 60: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/60.jpg)
slides$(“div”).slideUp(200)
$(“div”).slideDown(“slow”)
![Page 61: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/61.jpg)
animate$(“div”).animate({height: “toggle”, opacity: “toggle”})
$(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})
![Page 62: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/62.jpg)
Lab 4: Events and Effects
• 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
Note: Use the Lab 2 File again
![Page 63: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/63.jpg)
5 parts of jquerydom
events
effects
ajax
plugins
![Page 64: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/64.jpg)
make easy things easy$(“div”).load(“some_url”);
$(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });
![Page 65: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/65.jpg)
it’s easy to do it right$.getJSON(“some_url”, function(json) { ... })
$.getJSON(“some_url”, {data: “foo”}, function(json) { ... })
![Page 66: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/66.jpg)
it’s consistent$.get(“some_url”, function(text) { ... })
$.post(“some_url”, {data: “foo”}, function(text) { ... })
![Page 67: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/67.jpg)
and powerful
•async•beforeSend•cache•complete•contentType•data•dataType•error
•global• ifModi!ed•jsonp•processData•success•timeout•type
$.ajax Options
![Page 68: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/68.jpg)
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%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/69.jpg)
5 parts of jquerydom
events
effects
ajax
plugins
![Page 70: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/70.jpg)
there are hundreds
![Page 71: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/71.jpg)
which are important?
![Page 72: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/72.jpg)
jquery ui•Draggables
•Droppables
• Sortables
• Selectables
• Resizables
•Accordion
•Date Picker
•Dialog
• Slider
• Tabs
Widgets
Primitives
http://ui.jquery.com
![Page 73: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/73.jpg)
jquery formsajaxify a form in one easy step:
$(“form.remote”).ajaxForm()
http://www.malsup.com/jquery/form/
![Page 74: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/74.jpg)
form validationspecify validation rules in your markup
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
![Page 75: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/75.jpg)
metadata pluginspecify metadata for elements in markup
<div data=”{some: ‘data’}”>$(“div”).metadata().some // returns ‘data’
http://jqueryjs.googlecode.com/svn/trunk/plugins/metadata/
BASE
![Page 76: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/76.jpg)
Event DrivenJavaScript
![Page 77: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/77.jpg)
http://github.com/wycats/blue-ridge
![Page 78: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/78.jpg)
jQuery on Rails
![Page 79: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/79.jpg)
jQuery and RJS
![Page 80: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/80.jpg)
Rails 3
![Page 81: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/81.jpg)
Ajax and Rails$.getJSON(“/rails/action”)
![Page 82: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/82.jpg)
Ajax and Railsrespond_to do |format| format.json { render :json => obj }end
![Page 83: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/83.jpg)
link_to_remotelink_to_remote "Delete this post", :update => "posts", :url => { :action => "destroy", :id => post.id }
![Page 84: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/84.jpg)
link_to "Delete this post", url(:action => "destroy", :id => post.id), :rel => "#posts"
link_to_remote
![Page 85: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/85.jpg)
$(‘a.remote’).live(“click”, function() { $(this.rel).load(this.href) });
link_to_remote
![Page 86: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/86.jpg)
<% form_remote_tag :url => ..., :update => “res” do -%>
<% form_tag :url => ..., :rel => “#res” do -%>
form_remote_tag
![Page 87: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/87.jpg)
$(‘form’).each(function() { $(this).ajaxForm({ target: this.rel }) })
form_remote_tag
![Page 88: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/88.jpg)
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 > 250) { var field = $('#suggest'); var url = field.attr('rel'); field.load(url, {q: field.val()}); } lastTime = new Date;});
![Page 89: jQuery%20on%20Rails%20Presentation](https://reader033.vdocuments.us/reader033/viewer/2022060117/55878972d8b42a51318b4672/html5/thumbnails/89.jpg)
periodically_call_remoteperiodically_call_remote( :url => { :action => 'avgs' }, :update => 'avg', :frequency => '20')
setInterval(function() { $('#avg') .load('/some/avgs');}, 20000);