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" value="dcab4e1ab6a78f1f618b97008246df3334075ca9" /></div> <input id="user_username" name="user[username]" size="30" type="text" /></form>

inline JS

<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

Time in Project

remote_form_for... fantastic! so easy!

Difficulty

Time in Project

autocomplete! wow! I don’t need

any JS!

Difficulty

Time in Project

holy cow... RJS... Who needs this stodgy

“Javascript”

Difficulty

Time in Project

one day...

Difficulty

Time in Project

we need an autocompleter that talks

to a web service

Difficulty

Time in Project

quick... cancel the launch

Difficulty

Time in Project

Or...

Difficulty

Time in Project

Difficulty

Time in Project

learn JS or hire someone who

knows JS

“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('dcab4e1ab6a78f1f618b97008246df3334075ca9')}); return false;">Awesome!</a>inline JS!

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

<%= 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;})

$("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;})

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

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

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.