jquery and rails, sitting in a tree
DESCRIPTION
TRANSCRIPT
Adam McCrea [email protected] @adamlogic
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
1. Select some HTML elements.
2. Call methods on them.
3. Repeat.
JQUERY RECIPE
$("p.neat").addClass("ohmy").show("slow");
$() == jQuery()
CSS Selector
$("p.neat") <p><p>
<p><p>
<p>
<p>
CSS Selector jQuery Wrapper
$("p.neat") <p><p>
<p><p>
<p>
<p>
$("p.neat").addClass("ohmy").show("slow");
jQuery Wrapper Methods
jQuery Wrapper
<p> <p><p>
<p>
jQuery function always returns jQuery wrapper
$(...) ALWAYS
$.fn.log = function() { console.log(this); return this;}
Write your own wrapper method
$("p.neat").log().show("slow");
Events
<a onclick="alert('I was clicked'); return false;">
html
$('a.clickme').bind('click', function(event) { alert('I was clicked!'); event.preventDefault();});
<a class="clickme">
html
script
$('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault();});
<a class="clickme">
html
script
REVISITED
$(css_selector)
$(dom_element)
$(function)
$(html_string)
$()
$('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault();});
$(function() {
});
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
✓
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
<!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>
<%= csrf_meta_tag %>
<%= link_to 'view', item, :remote => true %>
<meta name="csrf-param" content="authenticity_token"/><meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<%= csrf_meta_tag %>
<%= link_to 'view', item, :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 %>
<%= link_to 'view', item, :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 %>
<%= link_to 'view', item, :remote => true %>
:confirm and :method also available
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.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.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
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
✓✓
✓
✓✓
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
2
✓
X
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
2
✓✓
✓
X
<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 %>
<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 %>
<%= 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)
JQUERY + RAILS 3
Include jquery.js and rails.js
Include csrf_meta_tags
:remote => true
Render .js.erb templates
2X
✓✓
✓
JQUERY + RAILS 3
Include jquery.js and rails.js
Reproduce csrf_meta_tags
‘data-remote’ => true
Render .js.erb templates
2X
✓✓
✓
✓✓
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
✓✓✓
AJAX REQUEST
JAVASCRIPTbrowser app
AJAX REQUEST
JSONbrowser app
<%= link_to 'view', '/item/1', 'data-remote' => true, 'data-type' => 'json' %>
template
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
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(); }});
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]); }});
Intro to jQuery
jQuery with Rails 3
jQuery with Rails 2
Beyond the Rails (Ajax) Way
AGENDA
✓✓✓
✓
Thanks!
Adam McCrea [email protected] @adamlogic
Scrooge McDuck - http://www.duckmania.de/images/picsou300_poster.jpg