Merb jQuery
Upcoming SlideShare
Loading in...5
×
 

Merb jQuery

on

  • 8,520 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,520
Views on SlideShare
8,505
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
  • 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.