Merb jQuery
-
Upload
yehuda-katz -
Category
Technology
-
view
5.011 -
download
0
description
Transcript of Merb jQuery
![Page 1: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/1.jpg)
Merb with jQuery
(not RJS)
![Page 2: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/2.jpg)
Rails and JS
![Page 3: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/3.jpg)
<% remote_form_for(@user) do |f| %> <%= f.text_field :username %><% end %>
![Page 4: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/4.jpg)
<form action="/users" class="new_user" id="new_user" method="post" onsubmit="new Ajax.Request('/users', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;"><div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="dcab4e1ab6a78f1f618b97008246df3334075ca9" /></div> <input id="user_username" name="user[username]" size="30" type="text" /></form>
inline JS
![Page 5: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/5.jpg)
<center> <font face="Arial">Hello</font></center>
![Page 6: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/6.jpg)
<center> <font face="Arial">Hello</font></center>
we stopped doing this
![Page 7: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/7.jpg)
“It works”
![Page 8: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/8.jpg)
Kinda.
![Page 9: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/9.jpg)
Difficulty
Time in Project
![Page 10: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/10.jpg)
Difficulty
Time in Project
remote_form_for... fantastic! so easy!
![Page 11: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/11.jpg)
Difficulty
Time in Project
autocomplete! wow! I don’t need
any JS!
![Page 12: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/12.jpg)
Difficulty
Time in Project
holy cow... RJS... Who needs this stodgy
“Javascript”
![Page 13: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/13.jpg)
Difficulty
Time in Project
one day...
![Page 14: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/14.jpg)
Difficulty
Time in Project
we need an autocompleter that talks
to a web service
![Page 15: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/15.jpg)
Difficulty
Time in Project
quick... cancel the launch
![Page 16: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/16.jpg)
Difficulty
Time in Project
![Page 17: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/17.jpg)
Or...
![Page 18: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/18.jpg)
Difficulty
Time in Project
![Page 19: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/19.jpg)
Difficulty
Time in Project
learn JS or hire someone who
knows JS
![Page 20: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/20.jpg)
“It’s hard”
![Page 21: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/21.jpg)
Let’s take a look
![Page 22: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/22.jpg)
<%= form_for(@user, :class => "remote", :action => "/foo") do %> <%= text_field :username %><% end =%>
![Page 23: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/23.jpg)
<form class="remote" method="post" action="/foo"> <input type="text" class="text" value="" name="username" id="params_username"/></form>
![Page 24: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/24.jpg)
And the JavaScript
![Page 25: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/25.jpg)
(scary!)
![Page 26: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/26.jpg)
$("form.remote").ajaxForm();
![Page 27: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/27.jpg)
link_to_remote
![Page 28: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/28.jpg)
<%= link_to_remote "Awesome!", :url => "/foo", :update => "some_id" %>
![Page 29: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/29.jpg)
<a href="#" onclick="new Ajax.Updater('some_id', '/foo', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('dcab4e1ab6a78f1f618b97008246df3334075ca9')}); return false;">Awesome!</a>inline JS!
![Page 30: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/30.jpg)
<a href="#" onclick="new Ajax.Updater('some_id', '/foo', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('dcab4e1ab6a78f1f618b97008246df3334075ca9')}); return false;">Awesome!</a>(so easy!)
![Page 31: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/31.jpg)
<%= link_to "Awesome!", "/foo", :rel => "#some_id", :class => "remote" %>
![Page 32: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/32.jpg)
<a href="/foo" class="remote" rel="#some_id">Awesome!</a>
![Page 33: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/33.jpg)
“I bet the JavaScript is super-crazy”
![Page 34: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/34.jpg)
$("a.remote").click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false;})
![Page 35: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/35.jpg)
$("a.remote").click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false;})
CSS selector
![Page 36: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/36.jpg)
$("a.remote").click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false;})
supplying a rel means update
![Page 37: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/37.jpg)
$("a.remote").click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false;})
otherwise use $.get
![Page 38: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/38.jpg)
$("a.remote").click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false;}) X
no JS?
![Page 39: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/39.jpg)
<a href="/foo" class="remote" rel="#some_id">Awesome!</a>
![Page 40: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/40.jpg)
Want a helper?
![Page 41: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/41.jpg)
def link_to_remote(text, url, options = {}) if options.key?(:update) options[:rel] = options.delete(:update) end options[:class] = options[:class].to_s. split(" ").push("remote").join(" ") link_to(text, url, options)end
![Page 42: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/42.jpg)
If you switch to Prototype (o.O)
![Page 43: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/43.jpg)
$$("a.remote").observe("click", function() { if(this.rel) new Ajax.Updater($$(this.rel), this.href); else new Ajax.Request(this.href); return false;});
![Page 44: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/44.jpg)
Using JSON
![Page 45: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/45.jpg)
class Speakers < Application provides :json
def index @speakers = Speaker.all display @speakers end end
![Page 46: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/46.jpg)
class Speakers < Application provides :json
def index @speakers = Speaker.all display @speakers end end
![Page 47: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/47.jpg)
$.getJSON("/speakers", function(json) { // [{id: 1, name: "Joe Blow"}]});
![Page 48: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/48.jpg)
$.getJSON("/speakers", function(json) { // [{id: 1, name: "Joe Blow"}]});
Accept: application/json
![Page 49: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/49.jpg)
class Speakers < Application provides :json
def index @speakers = Speaker.all display @speakers end end @speakers.to_json
![Page 50: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/50.jpg)
What about RJS?
![Page 51: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/51.jpg)
page.insert_html :bottom, 'list', content_tag("li", "Fox")
![Page 52: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/52.jpg)
Generated JS
![Page 53: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/53.jpg)
try { new Insertion.Bottom("list", "<li>Fox</li>");} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('new Insertion.Bottom(\"list\", \"<li>Fox</li>\");'); throw e }
![Page 54: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/54.jpg)
Big Scary JS
![Page 55: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/55.jpg)
$.get("/ajax_url", function(html) { $("#list").append(html)})
![Page 56: Merb jQuery](https://reader033.fdocuments.us/reader033/viewer/2022052619/555930afd8b42a4f3d8b4925/html5/thumbnails/56.jpg)
Thank you.