0
Merb with jQuery
(not RJS)
Rails and JS
<% remote_form_for(@user) do |f| %>
  <%= f.text_field :username %>
<% end %>
<form action=quot;/usersquot; class=quot;new_userquot;
id=quot;new_userquot; method=quot;postquot; onsubmit=quot;new
Ajax....
<center>
  <font face=quot;Arialquot;>Hello</font>
</center>
<center>
  <font face=quot;Arialquot;>Hello</font>
</center>
              we stopped
              doing this
“It works”
Kinda.
Difficulty




           Time in Project
Difficulty remote_form_for...
      fantastic! so easy!



               Time in Project
Difficulty  autocomplete!
         wow! I don’t need
             any JS!


               Time in Project
holy cow... RJS...
Difficulty
       Who needs this stodgy
            “Javascript”



              Time in Project
Difficulty

           one day...



             Time in Project
we need an
Difficulty
    autocompleter that talks
         to a web service



              Time in Project
Difficulty   quick... cancel
            the launch



                Time in Project
Difficulty




           Time in Project
Or...
Difficulty




           Time in Project
learn JS or
    hire someone who
Difficulty knows JS




             Time in Project
“It’s hard”
Let’s take a look
<%= form_for(@user, :class => quot;remotequot;, :action => quot;/fooquot;) do %>
  <%= text_field :username %>
<% end =%>
<form class=quot;remotequot; method=quot;postquot; action=quot;/fooquot;>
  <input type=quot;textquot; class=quot;textquot...
And the JavaScript
(scary!)
$(quot;form.remotequot;).ajaxForm();
link_to_remote
<%= link_to_remote quot;Awesome!quot;,
    :url => quot;/fooquot;,
    :update => quot;some_idquot; %>
<a href=quot;#quot; onclick=quot;new
Ajax.Updater('some_id', '/foo',
{asynchronous:true, evalScripts:true,
parameters:'aut...
<a href=quot;#quot; onclick=quot;new
Ajax.Updater('some_id', '/foo',
{asynchronous:true, evalScripts:true,
parameters:'aut...
<%= link_to quot;Awesome!quot;, quot;/fooquot;,
    :rel => quot;#some_idquot;,
    :class => quot;remotequot; %>
<a href=quot;/fooquot; class=quot;remotequot; rel=quot;#some_idquot;>Awesome!</a>
“I bet the JavaScript is super-crazy”
$(quot;a.remotequot;).click(function() {
   if(this.rel) $(this.rel).load(this.href);
   else $.get(this.href);
   return ...
CSS selector


$(quot;a.remotequot;).click(function() {
   if(this.rel) $(this.rel).load(this.href);
   else $.get(this.hr...
$(quot;a.remotequot;).click(function() {
   if(this.rel) $(this.rel).load(this.href);
   else $.get(this.href);
   return ...
$(quot;a.remotequot;).click(function() {
   if(this.rel) $(this.rel).load(this.href);
   else $.get(this.href);
   return ...
X
$(quot;a.remotequot;).click(function() {



})
   if(this.rel) $(this.rel).load(this.href);
   else $.get(this.href);
  ...
<a href=quot;/fooquot; class=quot;remotequot; rel=quot;#some_idquot;>Awesome!</a>
Want a helper?
def link_to_remote(text, url, options = {})
  if options.key?(:update)
    options[:rel] = options.delete(:update)
  end

...
If you switch to Prototype (o.O)
$$(quot;a.remotequot;).observe(quot;clickquot;, function() {
  if(this.rel) new Ajax.Updater($$(this.rel), this.href);
  e...
Using JSON
class Speakers < Application
  provides :json

  def index
    @speakers = Speaker.all
    display @speakers
  end

end
class Speakers < Application
  provides :json

  def index
    @speakers = Speaker.all
    display @speakers
  end

end
$.getJSON(quot;/speakersquot;, function(json) {
  // [{id: 1, name: quot;Joe Blowquot;}]
});
$.getJSON(quot;/speakersquot;, function(json) {
  // [{id: 1, name: quot;Joe Blowquot;}]
});
      Accept:
 application/js...
class Speakers < Application
  provides :json

  def index
    @speakers = Speaker.all
    display @speakers
  end

end   ...
What about RJS?
page.insert_html :bottom, 'list',
                 content_tag(quot;liquot;, quot;Foxquot;)
Generated JS
try {
  new Insertion.Bottom(quot;listquot;, quot;<li>Fox</
li>quot;);
} catch (e) {
  alert('RJS error:nn' + e.toString()...
Big Scary JS
$.get(quot;/ajax_urlquot;, function(html) {
   $(quot;#listquot;).append(html)
})
Thank you.
Upcoming SlideShare
Loading in...5
×

Merb jQuery

5,037

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,037
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
82
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×