Your SlideShare is downloading. ×
Merb jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Merb jQuery

4,997
views

Published on

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

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
4,997
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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.

×