Merb jQuery
Upcoming SlideShare
Loading in...5
×
 

Merb jQuery

on

  • 8,491 views

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

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

Statistics

Views

Total Views
8,491
Slideshare-icon Views on SlideShare
8,476
Embed Views
15

Actions

Likes
7
Downloads
81
Comments
1

1 Embed 15

http://www.slideshare.net 15

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Currently DM doesn't like to render @proxy_for_array_of_objects.to_json (which display does for us) correctly... it'll call inspect on each object, so you might end up with something like this: '[#,#,#,...]' which is obviously wrong.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Merb jQuery Merb jQuery Presentation Transcript

    • 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.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>
    • <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; value=quot;quot; name=quot;usernamequot; id=quot;params_usernamequot;/> </form>
    • 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:'authenticity_token=' + encodeURIComponent('dcab4e1ab6a78f1f618b97 008246df3334075ca9')}); return false;quot;>Awesome!</a> JS! inline
    • <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>
    • <%= 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 false; })
    • CSS selector $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; })
    • $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; }) supplying a rel means update
    • $(quot;a.remotequot;).click(function() { if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; }) otherwise use $.get
    • X $(quot;a.remotequot;).click(function() { }) if(this.rel) $(this.rel).load(this.href); else $.get(this.href); return false; no JS?
    • <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 options[:class] = options[:class].to_s. split(quot; quot;).push(quot;remotequot;).join(quot; quot;) link_to(text, url, options) 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); 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(quot;/speakersquot;, function(json) { // [{id: 1, name: quot;Joe Blowquot;}] });
    • $.getJSON(quot;/speakersquot;, function(json) { // [{id: 1, name: quot;Joe Blowquot;}] }); 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(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()); alert('new Insertion.Bottom(quot;listquot;, quot;<li>Fox</li>quot;);'); throw e }
    • Big Scary JS
    • $.get(quot;/ajax_urlquot;, function(html) { $(quot;#listquot;).append(html) })
    • Thank you.