jQuery%20on%20Rails%20Presentation

How is this going to
work?

Labs!
git clone git://github.com/adelcambre/jquery-tutorial.git

h1 {
color: #999;
}

UJS With jQuery
$(“h1”).click(function() {
$(this).fadeIn();
});

get some elements.
but how?

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

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

$(“table tr:nth-
child(even) > td:visible”)

$(“div”)
Returns jquery object

$(“div”).fadeIn()

.css(“color”, “green”)

Crazy chains
$(“ul.open”) // [ ul, ul, ul ]
.children(“li”) // [ li, li, li ]
.addClass(“open”) // [ li, li, li]
.end() // [ ul, ul, ul ]
.ﬁnd(“a”) // [ a, a, a ]
.click(function(){
$(this).next().toggle();
return false;
}) // [ a, a, a ]
.end(); // [ ul, ul, ul ]

Lab 1: Selectors
•Select every other row of the table
• Select the Checked checkboxes
• Select the ﬁrst column of the table
• Select the top level of the outline
• Select any links to jquery.com
• Select any images that contain ﬂowers

5 parts of jquery
dom
events
effects
ajax
plugins

dom traversal
$(“div”).parent();
$(“div”).siblings();
$(“div”).next();
$(“div”).nextAll(“p”);
$(“div”).nextAll(“p:first”);

dom

$(“div”)

<body>

<div> <div> <pre>

<p> <p> <p> <p> <p> <p>

dom

$(“div#foo”).siblings()

<body>

<div id='foo'> <div> <pre>

<p> <p> <p> <p> <p> <p>

dom

$(“div”).next()

<body>

<div> <div> <pre>

<p> <p> <p> <p> <p> <p>

dom

$(“div”).nextall(“p”)

<body>

<div id='foo'> <p> <p> <pre> <p>

dom

$(“div”).nextall(“p: rst”)

<body>

<div id='foo'> <p> <p> <pre> <p>

dom

nd
$(“div pre”)
$(“div”).find(“pre”)

dom

$(“div pre”)

<body>

<div> <div> <pre>

<p> <pre> <pre> <p> <pre> <p>

dom

$(“div”). nd(“pre”)

<body>

<div> <div> <pre>

<p> <pre> <pre> <p> <pre> <p>

dom

lter
$(“div:contains(some text)”)
$(“div”).filter(“:contains(some text)”)

$(“div”).filter(function() {
return $(this).text().match(“some text”)
})

dom

andSelf()
$(“div”).siblings().andSelf()
$(“div”).parent().andSelf()

dom

$(“div”).siblings().andself()

<body>


<p> <p> <p> <p> <p> <p>

dom

$(“p”).parent().andself()

<body>


<p> <p> <p> <p> <p> <p>

dom

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

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

classes
$(“div”).addClass(“foo”)
$(“div”).removeClass(“foo”)
$(“div”).toggleClass(“foo”)
$(“div”).hasClass(“foo”)

dom

other
$(“div”).html()
$(“div”).html(“<p>Hello</p>”)
$(“div”).text()
$(“div”).text(“Hello”)
$(“div”).val()
$(“div”).val(“Hello”)

dom

manipulation
$(“div”).append(“<p>Hello</p>”)
$(“<p>Hello</p>”).appendTo(“div”)
$(“div”).after(“<p>Hello</p>”)
$(“<p>Hello</p>”).insertAfter(“div”)

dom

way more...
http://docs.jquery.com
http://api.jquery.com

dom

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 ﬁeld

document ready
$(document).ready(function() { ... })
Alias: jQuery(function($) { ... })

bind
$(“div”).bind(“click”, function() { ... })
Alias: $(“div”).click(function() { ... })

“this” bound
refers to the element

e
$(“div”).click(function(e) { ... })

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

trigger
$(“div”).trigger(“click”)
Alias: $(“div”).click()

triggerHandler
doesn’t trigger the browser’s default actions

custom events
$(“div”).bind(“myEvent”, function() { ... })
$(“div”).trigger(“myEvent”)

hover
$(“div”).hover(function() { ... }, function() { ... })

toggle
$(“div”).toggle(function() { ... }, function() { ... })

1.3

live
$(“div”).live(“click”, function() { ... })

Fades
$(“div”).fadeOut(“slow”)

slides
$(“div”).slideUp(200)
$(“div”).slideDown(“slow”)

animate
$(“div”).animate({height: “toggle”, opacity: “toggle”})
$(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})

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

make easy things easy
$(“div”).load(“some_url”);
$(“div”).load(“some_url”, {data: “foo”},
function(text) { ... });

it’s easy to do it right
$.getJSON(“some_url”, function(json) { ... })
$.getJSON(“some_url”, {data: “foo”},
function(json) { ... })

it’s consistent
$.get(“some_url”, function(text) { ... })
$.post(“some_url”, {data: “foo”},
function(text) { ... })

and powerful
$.ajax Options

• async • global
• beforeSend • ifModi ed
• cache • jsonp
• complete • processData
• contentType • success
• data • timeout
• dataType • type
• error

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() { ... });

jquery ui
• Draggables • Accordion
• Droppables • Date Picker
• Sortables • Dialog
• Selectables • Slider Widgets

• Resizables • Tabs
Primitives

http://ui.jquery.com

jquery one easy step:
ajaxify a form in
forms
$(“form.remote”).ajaxForm()

http://www.malsup.com/jquery/form/

form validation
specify validation rules in your markup

http://bassistance.de/jquery-
plugins/jquery-plugin-validation/

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/

http://github.com/
wycats/blue-ridge

Ajax and Rails
$.getJSON(“/rails/action”)

Ajax and Rails
respond_to do |format|
format.json {
render :json => obj
}
end

link_to_remote
link_to_remote "Delete this post",
:update => "posts",
:url => { :action => "destroy",
:id => post.id }

link_to_remote
link_to "Delete this post",
url(:action => "destroy",
:id => post.id),
:rel => "#posts"

link_to_remote
$(‘a.remote’).live(“click”, function() {
$(this.rel).load(this.href)
});

form_remote_tag
<% form_remote_tag :url => ...,
:update => “res” do -%>

<% form_tag :url => ...,
:rel => “#res” do -%>

form_remote_tag
$(‘form’).each(function() {
$(this).ajaxForm({ target: this.rel })
})

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;
});

periodically_call_remote
periodically_call_remote( setInterval(function() {
:url => { $('#avg')
:action => 'avgs' }, .load('/some/avgs');
:update => 'avg', }, 20000);
:frequency => '20')

jQuery%20on%20Rails%20Presentation

More Related Content

What's hot

Viewers also liked

Similar to jQuery%20on%20Rails%20Presentation

Recently uploaded

jQuery%20on%20Rails%20Presentation