jQuery and Rails, Sitting in a Tree
Upcoming SlideShare
Loading in...5
×
 

jQuery and Rails, Sitting in a Tree

on

  • 10,493 views

 

Statistics

Views

Total Views
10,493
Views on SlideShare
10,467
Embed Views
26

Actions

Likes
8
Downloads
69
Comments
0

3 Embeds 26

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery and Rails, Sitting in a Tree jQuery and Rails, Sitting in a Tree Presentation Transcript

  • 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> <p> $("p.neat") <p> <p> <p> <p>
  • CSS Selector jQuery Wrapper <p> <p> $("p.neat") <p> <p> <p> <p>
  • jQuery Wrapper Methods $("p.neat").addClass("ohmy").show("slow");
  • jQuery Wrapper <p> <p> <p> <p>
  • 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 %>
  • <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="/> <%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, :remote => true %>
  • <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 %> :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(); });
  • 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
  • <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, :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