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.

Merb jQuery

5,603 views

Published on

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

Published in: Technology, Business
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Currently DM doesn't like to render @proxy_for_array_of_objects.to_json (which display does for us) correctly... it'll call inspect on each object, so you might end up with something like this: '[#,#,#,...]' which is obviously wrong.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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.

×