Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery and Rails, Sitting in a Tree

9,636 views

Published on

Published in: Technology
  • Be the first to comment

jQuery and Rails, Sitting in a Tree

  1. 1. Adam McCrea adam@edgecase.com @adamlogic
  2. 2. AGENDA Intro to jQuery jQuery with Rails 3 jQuery with Rails 2 Beyond the Rails (Ajax) Way
  3. 3. JQUERY RECIPE 1. Select some HTML elements. 2. Call methods on them. 3. Repeat. $("p.neat").addClass("ohmy").show("slow");
  4. 4. $() == jQuery()
  5. 5. CSS Selector <p> <p> $("p.neat") <p> <p> <p> <p>
  6. 6. CSS Selector jQuery Wrapper <p> <p> $("p.neat") <p> <p> <p> <p>
  7. 7. jQuery Wrapper Methods $("p.neat").addClass("ohmy").show("slow");
  8. 8. jQuery Wrapper <p> <p> <p> <p>
  9. 9. jQuery function always returns jQuery wrapper $(...) ALWAYS
  10. 10. Write your own wrapper method $.fn.log = function() {   console.log(this);   return this; } $("p.neat").log().show("slow");
  11. 11. Events
  12. 12. html <a onclick="alert('I was clicked'); return false;">
  13. 13. html <a class="clickme"> script $('a.clickme').bind('click', function(event) {   alert('I was clicked!'); event.preventDefault(); });
  14. 14. html <a class="clickme"> script $('a.clickme').live('click', function(event) {   alert('I was clicked!'); event.preventDefault(); });
  15. 15. REVISITED
  16. 16. $(css_selector) $(dom_element) $(html_string) $(function) $()
  17. 17. $(function() { $('a.clickme').live('click', function(event) {   alert('I was clicked!'); event.preventDefault(); }); });
  18. 18. AGENDA ✓ Intro to jQuery jQuery with Rails 3 jQuery with Rails 2 Beyond the Rails (Ajax) Way
  19. 19. JQUERY + RAILS 3 Include jquery.js and rails.js Include csrf_meta_tags :remote => true Render .js.erb templates
  20. 20. <!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>
  21. 21. <%= csrf_meta_tag %> <%= link_to 'view', item, :remote => true %>
  22. 22. <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/> <%= csrf_meta_tag %> <%= link_to 'view', item, :remote => true %>
  23. 23. <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 %>
  24. 24. <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
  25. 25. 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(); });
  26. 26. 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
  27. 27. 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()
  28. 28. JQUERY + RAILS 3 ✓ Include jquery.js and rails.js ✓Include csrf_meta_tags ✓ ✓ :remote => true ✓ Render .js.erb templates
  29. 29. 2 JQUERY + RAILS X 3 Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true Render .js.erb templates
  30. 30. 2 JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true ✓ Render .js.erb templates
  31. 31. <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 %>
  32. 32. 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 %>
  33. 33. 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 %>
  34. 34. 2 JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true ✓ Render .js.erb templates
  35. 35. 2 JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js ✓Reproduce csrf_meta_tags ✓ ✓‘data-remote’ => true ✓ Render .js.erb templates
  36. 36. AGENDA ✓ Intro to jQuery ✓ jQuery with Rails 3 ✓ jQuery with Rails 2 Beyond the Rails (Ajax) Way
  37. 37. AJAX REQUEST browser app JAVASCRIPT
  38. 38. AJAX REQUEST browser app JSON
  39. 39. template <%= link_to 'view', '/item/1', 'data-remote' => true,                                'data-type' => 'json' %>
  40. 40. 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
  41. 41. 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();   } });
  42. 42. 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]);   } });
  43. 43. AGENDA ✓ Intro to jQuery ✓ jQuery with Rails 3 ✓ jQuery with Rails 2 ✓ Beyond the Rails (Ajax) Way
  44. 44. Thanks! Adam McCrea adam@edgecase.com @adamlogic Scrooge McDuck - http://www.duckmania.de/images/picsou300_poster.jpg

×