jquery and rails, sitting in a tree
DESCRIPTION
TRANSCRIPT
![Page 1: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/1.jpg)
Adam McCrea [email protected] @adamlogic
![Page 2: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/2.jpg)
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
![Page 3: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/3.jpg)
1. Select some HTML elements.
2. Call methods on them.
3. Repeat.
JQUERY RECIPE
$("p.neat").addClass("ohmy").show("slow");
![Page 4: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/4.jpg)
![Page 5: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/5.jpg)
$() == jQuery()
![Page 6: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/6.jpg)
CSS Selector
$("p.neat") <p><p>
<p><p>
<p>
<p>
![Page 7: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/7.jpg)
CSS Selector jQuery Wrapper
$("p.neat") <p><p>
<p><p>
<p>
<p>
![Page 8: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/8.jpg)
$("p.neat").addClass("ohmy").show("slow");
jQuery Wrapper Methods
![Page 9: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/9.jpg)
![Page 10: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/10.jpg)
jQuery Wrapper
<p> <p><p>
<p>
![Page 11: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/11.jpg)
jQuery function always returns jQuery wrapper
$(...) ALWAYS
![Page 12: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/12.jpg)
$.fn.log = function() { console.log(this); return this;}
Write your own wrapper method
$("p.neat").log().show("slow");
![Page 13: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/13.jpg)
Events
![Page 14: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/14.jpg)
<a onclick="alert('I was clicked'); return false;">
html
![Page 15: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/15.jpg)
$('a.clickme').bind('click', function(event) { alert('I was clicked!'); event.preventDefault();});
<a class="clickme">
html
script
![Page 16: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/16.jpg)
$('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault();});
<a class="clickme">
html
script
![Page 17: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/17.jpg)
REVISITED
![Page 18: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/18.jpg)
$(css_selector)
$(dom_element)
$(function)
$(html_string)
$()
![Page 19: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/19.jpg)
$('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault();});
$(function() {
});
![Page 20: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/20.jpg)
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
✓
![Page 21: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/21.jpg)
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
![Page 22: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/22.jpg)
![Page 23: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/23.jpg)
<!DOCTYPE html><html><head> <title>Example</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag 'jquery', 'rails' %> <%= csrf_meta_tag %></head>
<body>
<%= link_to 'view', item, :remote => true %>
</body></html>
![Page 24: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/24.jpg)
<%= csrf_meta_tag %>
<%= link_to 'view', item, :remote => true %>
![Page 25: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/25.jpg)
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<%= csrf_meta_tag %>
<%= link_to 'view', item, :remote => true %>
![Page 26: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/26.jpg)
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<a href="/item/1" data-remote="true">view</a>
<%= csrf_meta_tag %>
<%= link_to 'view', item, :remote => true %>
![Page 27: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/27.jpg)
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<a href="/item/1" data-remote="true">view</a>
<%= csrf_meta_tag %>
<%= link_to 'view', item, :remote => true %>
:confirm and :method also available
![Page 28: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/28.jpg)
rails.js$('form[data-remote]').live('submit', function(e) { $(this).callRemote(); e.preventDefault();});
$('a[data-remote],input[data-remote]').live('click', function(e) { $(this).callRemote(); e.preventDefault();});
![Page 29: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/29.jpg)
page.insert_html :bottom, :items, :partial => 'item', :object => @itempage.replace_html :item_count, pluralize(@items.size, 'item')page[:new_item_form].toggle
create.js.rjs
![Page 30: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/30.jpg)
page.insert_html :bottom, :items, :partial => 'item', :object => @itempage.replace_html :item_count, pluralize(@items.size, 'item')page[:new_item_form].toggle
$('#items').append(<%= render(:partial => 'item', :object => @item).to_json%>);
$('#item_count').html('<%= pluralize(@items.size, "item") %>');
$('#new_item_form').toggle()
create.js.rjs
create.js.erb
![Page 31: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/31.jpg)
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
✓✓
✓
✓✓
![Page 32: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/32.jpg)
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
2
✓
X
![Page 33: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/33.jpg)
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
2
✓✓
✓
X
![Page 34: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/34.jpg)
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<a href="/item/1" data-remote="true">view</a>
<%= csrf_meta_tag %>
<%= link_to 'view', item, :remote => true %>
![Page 35: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/35.jpg)
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<a href="/item/1" data-remote="true">view</a>
<%= csrf_meta_tag %>
Rack::Utils.escape_html(request_forgery_protection_token)Rack::Utils.escape_html(form_authenticity_token)
<%= link_to 'view', item, :remote => true %>
![Page 36: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/36.jpg)
<%= link_to 'view', item, 'data-remote' => true %>
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<a href="/item/1" data-remote="true">view</a>
<%= csrf_meta_tag %>
Rack::Utils.escape_html(request_forgery_protection_token)Rack::Utils.escape_html(form_authenticity_token)
![Page 37: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/37.jpg)
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
2X
✓✓
✓
![Page 38: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/38.jpg)
JQUERY + RAILS 3
Include jquery.js and rails.js
Reproduce csrf_meta_tags
‘data-remote’ => true
Render .js.erb templates
2X
✓✓
✓
✓✓
![Page 39: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/39.jpg)
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
✓✓✓
![Page 40: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/40.jpg)
AJAX REQUEST
JAVASCRIPTbrowser app
![Page 41: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/41.jpg)
AJAX REQUEST
JSONbrowser app
![Page 42: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/42.jpg)
<%= link_to 'view', '/item/1', 'data-remote' => true, 'data-type' => 'json' %>
template
![Page 43: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/43.jpg)
controller def create item = Item.create(params[:item])
render :json => { :errors => item.errors, :item_count => Item.count, :html => render_to_string(:partial => 'item', :object => item) } end
![Page 44: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/44.jpg)
application.js
$('#new_item_form').live('ajax:success', function(xhr, data) { if (data.errors.length) { alert(data.errors); } else { $('#items').append(data.html); $('#item_count').html(data.item_count); $(this).hide(); }});
![Page 45: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/45.jpg)
rails.js$.ajax({ url: url, data: data, dataType: dataType, type: method.toUpperCase(), beforeSend: function (xhr) { el.trigger('ajax:loading', xhr); }, success: function (data, status, xhr) { el.trigger('ajax:success', [data, status, xhr]); }, complete: function (xhr) { el.trigger('ajax:complete', xhr); }, error: function (xhr, status, error) { el.trigger('ajax:failure', [xhr, status, error]); }});
![Page 46: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/46.jpg)
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
✓✓✓
✓
![Page 47: jQuery and Rails, Sitting in a Tree](https://reader034.vdocuments.us/reader034/viewer/2022052321/54823741b4af9f8c0d8b4729/html5/thumbnails/47.jpg)
Thanks!
Adam McCrea [email protected] @adamlogic
Scrooge McDuck - http://www.duckmania.de/images/picsou300_poster.jpg