jQuery and Rails, Sitting in a Tree

9,255 views
9,092 views

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,255
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
71
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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

×