Merb with jQuery
(not RJS)

Rails and JS

<% remote_form_for(@user) do |f| %>
<%= f.text_field :username %>
<% end %>

<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\"
inline JS
value=\"dcab4e1ab6a78f1f618b97008246df33340
75ca9\" /></div>
<input id=\"user_username\"
name=\"user[username]\" size=\"30\"
type=\"text\" />
</form>

<center>
<font face=\"Arial\">Hello</font>
</center>

<center>
<font face=\"Arial\">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 => \"remote\", :action => \"/foo\") do %>
<%= text_field :username %>
<% end =%>

<form class=\"remote\" method=\"post\" action=\"/foo\">
<input type=\"text\" class=\"text\" value=\"\" name=\"username\" id=\"params_username\"/>
</form>

And the JavaScript

(scary!)

$(\"form.remote\").ajaxForm();

link_to_remote

<%= link_to_remote \"Awesome!\",
:url => \"/foo\",
:update => \"some_id\" %>

<a href=\"#\" onclick=\"new
Ajax.Updater('some_id', '/foo',
{asynchronous:true, evalScripts:true,
parameters:'authenticity_token=' +
encodeURIComponent('dcab4e1ab6a78f1f618b97
008246df3334075ca9')}); return
false;\">Awesome!</a> JS!
inline

<a href=\"#\" onclick=\"new
Ajax.Updater('some_id', '/foo',
{asynchronous:true, evalScripts:true,
parameters:'authenticity_token=' +
encodeURIComponent('dcab4e1ab6a78f1f618b97
008246df3334075ca9')}); return
(so easy!)
false;\">Awesome!</a>

<%= link_to \"Awesome!\", \"/foo\",
:rel => \"#some_id\",
:class => \"remote\" %>

<a href=\"/foo\" class=\"remote\" rel=\"#some_id\">Awesome!</a>

“I bet the JavaScript is super-crazy”

$(\"a.remote\").click(function() {
if(this.rel) $(this.rel).load(this.href);
else $.get(this.href);
return false;
})

CSS selector
$(\"a.remote\").click(function() {
if(this.rel) $(this.rel).load(this.href);
else $.get(this.href);
return false;
})

$(\"a.remote\").click(function() {
if(this.rel) $(this.rel).load(this.href);
else $.get(this.href);
return false;
})
supplying a rel
means update

$(\"a.remote\").click(function() {
if(this.rel) $(this.rel).load(this.href);
else $.get(this.href);
return false;
})
otherwise
use $.get

X
$(\"a.remote\").click(function() {
})
if(this.rel) $(this.rel).load(this.href);
else $.get(this.href);
return false;
no JS?

<a href=\"/foo\" class=\"remote\" rel=\"#some_id\">Awesome!</a>

Want a helper?

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

If you switch to Prototype (o.O)

$$(\"a.remote\").observe(\"click\", function() {
if(this.rel) new Ajax.Updater($$(this.rel), this.href);
else new Ajax.Request(this.href);
return false;
});

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(\"/speakers\", function(json) {
// [{id: 1, name: \"Joe Blow\"}]
});

$.getJSON(\"/speakers\", function(json) {
// [{id: 1, name: \"Joe Blow\"}]
});
Accept:
application/json

class Speakers < Application
provides :json
def index
@speakers = Speaker.all
display @speakers
end
end @speakers.to_json

What about RJS?

page.insert_html :bottom, 'list',
content_tag(\"li\", \"Fox\")

Generated JS

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
}

Big Scary JS

$.get(\"/ajax_url\", function(html) {
$(\"#list\").append(html)
})

Thank you.