Merb jQuery

5,389 views
5,271 views

Published on

Using jQuery with Merb (and why Merb doesn't do RJS)

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
5,389
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
82
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Merb jQuery

  1. 1. Merb with jQuery (not RJS)
  2. 2. Rails and JS
  3. 3. <% remote_form_for(@user) do |f| %> <%= f.text_field :username %> <% end %>
  4. 4. <form action=quot;/usersquot; class=quot;new_userquot; id=quot;new_userquot; method=quot;postquot; onsubmit=quot;new Ajax.Request('/users', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;quot;><div style=quot;margin:0;padding: 0quot;><input name=quot;authenticity_tokenquot; type=quot;hiddenquot; inline JS value=quot;dcab4e1ab6a78f1f618b97008246df33340 75ca9quot; /></div> <input id=quot;user_usernamequot; name=quot;user[username]quot; size=quot;30quot; type=quot;textquot; /> </form>
  5. 5. <center> <font face=quot;Arialquot;>Hello</font> </center>
  6. 6. <center> <font face=quot;Arialquot;>Hello</font> </center> we stopped doing this
  7. 7. “It works”
  8. 8. Kinda.
  9. 9. Difficulty Time in Project
  10. 10. Difficulty remote_form_for... fantastic! so easy! Time in Project
  11. 11. Difficulty autocomplete! wow! I don’t need any JS! Time in Project
  12. 12. holy cow... RJS... Difficulty Who needs this stodgy “Javascript” Time in Project
  13. 13. Difficulty one day... Time in Project
  14. 14. we need an Difficulty autocompleter that talks to a web service Time in Project
  15. 15. Difficulty quick... cancel the launch Time in Project
  16. 16. Difficulty Time in Project
  17. 17. Or...
  18. 18. Difficulty Time in Project
  19. 19. learn JS or hire someone who Difficulty knows JS Time in Project
  20. 20. “It’s hard”
  21. 21. Let’s take a look
  22. 22. <%= form_for(@user, :class => quot;remotequot;, :action => quot;/fooquot;) do %> <%= text_field :username %> <% end =%>
  23. 23. <form class=quot;remotequot; method=quot;postquot; action=quot;/fooquot;> <input type=quot;textquot; class=quot;textquot; value=quot;quot; name=quot;usernamequot; id=quot;params_usernamequot;/> </form>
  24. 24. And the JavaScript
  25. 25. (scary!)
  26. 26. $(quot;form.remotequot;).ajaxForm();
  27. 27. link_to_remote
  28. 28. <%= link_to_remote quot;Awesome!quot;, :url => quot;/fooquot;, :update => quot;some_idquot; %>
  29. 29. <a href=quot;#quot; onclick=quot;new Ajax.Updater('some_id', '/foo', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('dcab4e1ab6a78f1f618b97 008246df3334075ca9')}); return false;quot;>Awesome!</a> JS! inline
  30. 30. <a href=quot;#quot; onclick=quot;new Ajax.Updater('some_id', '/foo', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('dcab4e1ab6a78f1f618b97 008246df3334075ca9')}); return (so easy!) false;quot;>Awesome!</a>
  31. 31. <%= link_to quot;Awesome!quot;, quot;/fooquot;, :rel => quot;#some_idquot;, :class => quot;remotequot; %>
  32. 32. <a href=quot;/fooquot; class=quot;remotequot; rel=quot;#some_idquot;>Awesome!</a>
  33. 33. “I bet the JavaScript is super-crazy”
  34. 34. $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; })
  35. 35. CSS selector $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; })
  36. 36. $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; }) supplying a rel means update
  37. 37. $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; }) otherwise use $.get
  38. 38. X $(quot;a.remotequot;).click(function() { }) if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; no JS?
  39. 39. <a href=quot;/fooquot; class=quot;remotequot; rel=quot;#some_idquot;>Awesome!</a>
  40. 40. Want a helper?
  41. 41. def link_to_remote(text, url, options = {}) if options.key?(:update) options[:rel] = options.delete(:update) end options[:class] = options[:class].to_s. split(quot; quot;).push(quot;remotequot;).join(quot; quot;) link_to(text, url, options) end
  42. 42. If you switch to Prototype (o.O)
  43. 43. $$(quot;a.remotequot;).observe(quot;clickquot;, function() { if(this.rel) new Ajax.Updater($$(this.rel), this.href); else new Ajax.Request(this.href); return false; });
  44. 44. Using JSON
  45. 45. class Speakers < Application provides :json def index @speakers = Speaker.all display @speakers end end
  46. 46. class Speakers < Application provides :json def index @speakers = Speaker.all display @speakers end end
  47. 47. $.getJSON(quot;/speakersquot;, function(json) { // [{id: 1, name: quot;Joe Blowquot;}] });
  48. 48. $.getJSON(quot;/speakersquot;, function(json) { // [{id: 1, name: quot;Joe Blowquot;}] }); Accept: application/json
  49. 49. class Speakers < Application provides :json def index @speakers = Speaker.all display @speakers end end @speakers.to_json
  50. 50. What about RJS?
  51. 51. page.insert_html :bottom, 'list', content_tag(quot;liquot;, quot;Foxquot;)
  52. 52. Generated JS
  53. 53. try { new Insertion.Bottom(quot;listquot;, quot;<li>Fox</ li>quot;); } catch (e) { alert('RJS error:nn' + e.toString()); alert('new Insertion.Bottom(quot;listquot;, quot;<li>Fox</li>quot;);'); throw e }
  54. 54. Big Scary JS
  55. 55. $.get(quot;/ajax_urlquot;, function(html) { $(quot;#listquot;).append(html) })
  56. 56. Thank you.

×