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

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.