jQuery and Rails, Sitting in a Tree

Adam McCrea adam@edgecase.com @adamlogic

AGENDA Intro to jQuery jQuery with Rails 3 jQuery with Rails 2 Beyond the Rails (Ajax) Way

JQUERY RECIPE 1. Select some HTML elements. 2. Call methods on them. 3. Repeat. $("p.neat").addClass("ohmy").show("slow");

$() == jQuery()

CSS Selector $("p.neat")

CSS Selector jQuery Wrapper $("p.neat")

jQuery Wrapper Methods $("p.neat").addClass("ohmy").show("slow");

jQuery Wrapper

jQuery function always returns jQuery wrapper $(...) ALWAYS

Write your own wrapper method $.fn.log = function() { console.log(this); return this; } $("p.neat").log().show("slow");

Events

html <a onclick="alert('I was clicked'); return false;">

html <a class="clickme"> script $('a.clickme').bind('click', function(event) { alert('I was clicked!'); event.preventDefault(); });

html <a class="clickme"> script $('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault(); });

REVISITED

$(css_selector) $(dom_element) $(html_string) $(function) $()

$(function() { $('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault(); }); });

AGENDA ✓ Intro to jQuery jQuery with Rails 3 jQuery with Rails 2 Beyond the Rails (Ajax) Way

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 %>

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

create.js.rjs page.insert_html :bottom, :items, :partial => 'item', :object => @item page.replace_html :item_count, pluralize(@items.size, 'item') page[:new_item_form].toggle

create.js.rjs page.insert_html :bottom, :items, :partial => 'item', :object => @item page.replace_html :item_count, pluralize(@items.size, 'item') page[:new_item_form].toggle create.js.erb $('#items').append(<%= render(:partial => 'item', :object => @item).to_json %>); $('#item_count').html('<%= pluralize(@items.size, "item") %>'); $('#new_item_form').toggle()

JQUERY + RAILS 3 ✓ Include jquery.js and rails.js ✓Include csrf_meta_tags ✓ ✓ :remote => true ✓ Render .js.erb templates

2 JQUERY + RAILS X 3 Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true Render .js.erb templates

2 JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true ✓ Render .js.erb templates

Rack::Utils.escape_html(request_forgery_protection_token) Rack::Utils.escape_html(form_authenticity_token) <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/> <%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, :remote => true %>

Rack::Utils.escape_html(request_forgery_protection_token) Rack::Utils.escape_html(form_authenticity_token) <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/> <%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, 'data-remote' => true %>

2 JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true ✓ Render .js.erb templates

2 JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js ✓Reproduce csrf_meta_tags ✓ ✓‘data-remote’ => true ✓ Render .js.erb templates

AGENDA ✓ Intro to jQuery ✓ jQuery with Rails 3 ✓ jQuery with Rails 2 Beyond the Rails (Ajax) Way

AJAX REQUEST browser app JAVASCRIPT

AJAX REQUEST browser app JSON

template <%= link_to 'view', '/item/1', 'data-remote' => true, 'data-type' => 'json' %>

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

AGENDA ✓ Intro to jQuery ✓ jQuery with Rails 3 ✓ jQuery with Rails 2 ✓ Beyond the Rails (Ajax) Way

Thanks! Adam McCrea adam@edgecase.com @adamlogic Scrooge McDuck - http://www.duckmania.de/images/picsou300_poster.jpg

http://jlembeck.blogspot.com	19
http://www.slideshare.net	2
http://jlembeck.blogspot.in	1

jQuery and Rails, Sitting in a Tree

by adamlogic

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 22

Statistics

jQuery and Rails, Sitting in a Tree Presentation Transcript