Download - jQuery on Rails Presentation
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 1/89
write less.do more.
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 2/89
who are we?
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 3/89
Yehuda KatzAndy Delcambre
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 4/89
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 5/89
How is this going towork?
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 6/89
Introduction tojQuery
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 7/89
Event DrivenJavaScript
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 8/89
Labs!
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.
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 10/89
Introduction tojQuery
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(
});
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 12/89
get some elements.but how?
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
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 15/89
get some elements.
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 17/89
do stuff.
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 18/89
$(“div”)Returns jquery object
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 19/89
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 21/89
we call this chainin
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 ]
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
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
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”);
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> <
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> <
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> <
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>
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 31/89
nd$(“div pre”)
$(“div”).find(“pre”)
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> <
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> <
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”)
})
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()
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> <
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 37/89
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
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”);
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”)
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”)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 42/89
noticing a pattern?
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”)
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
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 46/89
5 parts of jquerydom
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($) { ... })
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() { ... })
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 49/89
“this”refers to the element bound
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 51/89
corrected event obje
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()
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
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”)
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 55/89
hover$(“div”).hover(function() { ... }, function() { ..
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 56/89
toggle$(“div”).toggle(function() { ... }, function() { .
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 57/89
live$(“div”).live(“click”, function() { ... })
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 58/89
5 parts of jquery
events
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 59/89
Fades$(“div”).fadeIn()
$(“div”).fadeOut(“slow”)
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”)
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
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 63/89
5 parts of jquery
effects
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) { ... });
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) { ... })
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
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
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 69/89
5 parts of jquery
ajax
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 70/89
there are hundreds
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 71/89
which are important
jquery ui
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
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
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
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
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 76/89
Event DrivenJavaScript
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 77/89
http://github.com/wycats/blue-ridge
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 78/89
jQuery on Rails
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 79/89
jQuery and RJS
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 80/89
Rails 3
7/30/2019 jQuery on Rails Presentation
http://slidepdf.com/reader/full/jquery-on-rails-presentation 81/89
Ajax and Rails$.getJSON(“/rails/action”)
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
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 }
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
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
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
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
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;
});
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);