Merb jQuery

  • 4,954 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,954
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
81
Comments
1
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Merb with jQuery (not RJS)
  • 2. Rails and JS
  • 3. <% remote_form_for(@user) do |f| %> <%= f.text_field :username %> <% end %>
  • 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. <center> <font face=quot;Arialquot;>Hello</font> </center>
  • 6. <center> <font face=quot;Arialquot;>Hello</font> </center> we stopped doing this
  • 7. “It works”
  • 8. Kinda.
  • 9. Difficulty Time in Project
  • 10. Difficulty remote_form_for... fantastic! so easy! Time in Project
  • 11. Difficulty autocomplete! wow! I don’t need any JS! Time in Project
  • 12. holy cow... RJS... Difficulty Who needs this stodgy “Javascript” Time in Project
  • 13. Difficulty one day... Time in Project
  • 14. we need an Difficulty autocompleter that talks to a web service Time in Project
  • 15. Difficulty quick... cancel the launch Time in Project
  • 16. Difficulty Time in Project
  • 17. Or...
  • 18. Difficulty Time in Project
  • 19. learn JS or hire someone who Difficulty knows JS Time in Project
  • 20. “It’s hard”
  • 21. Let’s take a look
  • 22. <%= form_for(@user, :class => quot;remotequot;, :action => quot;/fooquot;) do %> <%= text_field :username %> <% end =%>
  • 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. And the JavaScript
  • 25. (scary!)
  • 26. $(quot;form.remotequot;).ajaxForm();
  • 27. link_to_remote
  • 28. <%= link_to_remote quot;Awesome!quot;, :url => quot;/fooquot;, :update => quot;some_idquot; %>
  • 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. <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. <%= link_to quot;Awesome!quot;, quot;/fooquot;, :rel => quot;#some_idquot;, :class => quot;remotequot; %>
  • 32. <a href=quot;/fooquot; class=quot;remotequot; rel=quot;#some_idquot;>Awesome!</a>
  • 33. “I bet the JavaScript is super-crazy”
  • 34. $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; })
  • 35. CSS selector $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; })
  • 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. $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; }) otherwise use $.get
  • 38. X $(quot;a.remotequot;).click(function() { }) if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; no JS?
  • 39. <a href=quot;/fooquot; class=quot;remotequot; rel=quot;#some_idquot;>Awesome!</a>
  • 40. Want a helper?
  • 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. If you switch to Prototype (o.O)
  • 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. Using JSON
  • 45. class Speakers < Application provides :json def index @speakers = Speaker.all display @speakers end end
  • 46. class Speakers < Application provides :json def index @speakers = Speaker.all display @speakers end end
  • 47. $.getJSON(quot;/speakersquot;, function(json) { // [{id: 1, name: quot;Joe Blowquot;}] });
  • 48. $.getJSON(quot;/speakersquot;, function(json) { // [{id: 1, name: quot;Joe Blowquot;}] }); Accept: application/json
  • 49. class Speakers < Application provides :json def index @speakers = Speaker.all display @speakers end end @speakers.to_json
  • 50. What about RJS?
  • 51. page.insert_html :bottom, 'list', content_tag(quot;liquot;, quot;Foxquot;)
  • 52. Generated JS
  • 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. Big Scary JS
  • 55. $.get(quot;/ajax_urlquot;, function(html) { $(quot;#listquot;).append(html) })
  • 56. Thank you.