ujs in rails 3

UJS inRails 3

Tuesday, February 1, 2011

UJS inRails 3

by Phil CrissmanTuesday, February 1, 2011

Rails and Javascript



Javascript helpers have been built into Rails from the very earliest versions.

Prototype and Ajaxy helpers have traditionally been “just there” and have always “just worked”



Javascript helpers have been built into Rails from the very earliest versions.

Prototype and Ajaxy helpers have traditionally been “just there” and have always “just worked”

Magic


Unobtrusive Javascript



Unobtrusive Javascript is simply the idea of keeping your behavior-defining script out of your content.

It’s the same idea as keeping your style-defining rules (CSS) out of your content.


Unobtrusive JavascriptSo instead of:

<a href="#" onclick="alert('ok!');"> Hey </a>

We would do:

<a href="#" class="alerty"> Hey </a>...<script type="javascript">$(function(){ $('.alerty').click(function(){ alert('ok!'); });});</script>


Unobtrusive JavascriptIs ‘unobtrusive’ Javascript ‘better’?


Unobtrusive JavascriptIs ‘unobtrusive’ Javascript ‘better’?

WELL, THAT’S JUST, LIKE

YOUR OPINION

MAN



Making Javascript ‘unobtrusive’ won’t magically make your code any better.

But...



It’s ‘better’ in the same sense that separating style from content is ‘better’.



And it’s how Javascript helpers are handled by default in Rails 3.



And wrote all your Javascript from scratch.

In the past, if you wanted to use unobtrusive javascript techniques in Rails, you simply stopped using the built-in Javascript helpers...



And still write all your Javascript from scratch.

In Rails 3, you get to keep using the built-in Javascript helpers...


UJS in Rails 3


UJS in Rails 3

Rails 3 makes several changes to the Javascript helpers:


UJS in Rails 3


1. Instead of inserting inline JS, Rails 3 uses HTML5 data- attributes.


UJS in Rails 3


2. No more ‘remote’ helpers (link_to_remote, remote_form_for, et al., are gone).



UJS in Rails 3


3. It’s a lot easier to pull out Prototype and switch to jQuery or mootools, etc, if you want to.

2. No more ‘remote’ helpers (link_to_remote, remote_form_for, et al., are gone).



UJS in Rails 3

1. Data attributes.

Rails takes advantage of a new feature of HTML5: any tag can have any number of attributes prepended with “data-”, and still be perfectly valid markup.


UJS in Rails 3

Common use case: deleting something, via a link:

<%= link_to "Delete", posts_path(@post), :method => "delete", :confirm => "Are you sure?" %>


UJS in Rails 3

Would render (pre Rails 3) as:

<a href="/posts/1" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'nMxiiHBFyQr9Q3Jc7QGzSd1tk08ujbsHhtF3S26k/k8='); f.appendChild(s);f.submit(); };return false;">Delete</a>


UJS in Rails 3

Would render as:

<a href="/posts/1" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'nMxiiHBFyQr9Q3Jc7QGzSd1tk08ujbsHhtF3S26k/k8='); f.appendChild(s);f.submit(); };return false;">Delete</a>

Magic


UJS in Rails 3

In Rails 3, this same link_to statement...

<%= link_to "Delete", posts_path(@post), :method => "delete", :confirm => "Are you sure?" %>

...will render as:

<a href="/posts/1" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>


UJS in Rails 3‘data-method’ and ‘data-confirm’ attributes (and everything else) are handled from /public/javascripts/rails.js

// from the jQuery version of rails.js:

function allowAction(element) { var message = element.attr('data-confirm'); return !message || (fire(element, 'confirm') && confirm(message)); }


UJS in Rails 3

2. ‘remote’ helpers.

Instead of helpers like link_to_remote, in Rails 3, :remote is a param that you include with your link or your form.


UJS in Rails 3

So if we want to make our delete link ajaxy:

<%= link_to "Delete", posts_path(@post), :method => "delete", :confirm => "Are you sure?", :remote => true %>


UJS in Rails 3

This will render (you guessed it) as:

<a href="/posts/1" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a>


UJS in Rails 3

This will render (you guessed it) as:

<a href="/posts/1" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a>

And clicking on it will fire a function in rails.js which creates an XMLHttpRequest and sends it to the URL in your href attribute.


UJS in Rails 3

3. Replacing Prototype with jQuery, mootools, or...

Rails 3 has made this very simple.


UJS in Rails 3

If we want to use jQuery, for example, we simply add to our Gemfile:

gem 'jquery-rails'

And then (in the terminal) :

% bundle install% rails g jquery:install


UJS in Rails 3

Side note: RJS

If you use RJS, just adding jquery-rails does not (at the moment, at least) provide jQuery equivalents for RJS statements.

You may be able to use jrails, which does (or at least did) provide these. (I haven’t tried this.)

Otherwise, you’ll want to stick with Prototype.


UJS in Rails 3: an example



Let’s actually make it work. Even if not using RJS, there are still a couple ways we can respond to the xhr sent by our delete link.



1. You could write a javascript template; for a destroy action, this might be destroy.js.erb (or destroy.js.haml)...



This might look something like:

/ destroy.js.haml$("#posts").html("#{escape_javascript(render(@posts))}");



2. Or, you might write javascript hooks straight into application.js, which will be called at the appropriate time.



In public/javascripts/application.js:

$(function(){ $('#posts a').bind("ajax:complete", function(n, xhr){ $(this).parent().parent().fadeOut(4000); });});



There are several events fired with each xhr (they differ slightly between the Prototype and jQuery version of rails.js):

// Prototype rails.jsajax:beforeajax:successajax:completeajax:failureajax:after

// jQuery rails.jsajax:beforeSendajax:successajax:completeajax:error


Obtrusive JavascriptBut, if you’re determined to cling to the past:


Recap:


Recap:Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this.



However, in Rails 3, these helpers aim to be unobtrusive.



Rails 3 js changes include:1. Utilizing HTML5 data-* attributes.2. Adding a :remote param to helpers that can use it.3. Making it easy to drop in alternate JS frameworks in place of Prototypejs.




You can either use a js template to send js right back to the browser, or you can take advantage of the ajax hooks provided by rails.js.

Rails 3 js changes include:1. Utilizing HTML5 data-* attributes.2. Adding a :remote param to helpers that can use it.3. Making it easy to drop in alternate JS frameworks in place of Prototypejs.



Resources:

There are several books recently or soon-to-be published covering Rails 3; most seem to have little or no coverage of unobtrusive JS.


Resources:

Rails 3 in Action, by Yehuda Katz (@wycats) and Ryan Bigg (@ryanbigg), will contain some examples of UJS. It’s not complete yet, but if you’re interested in checking it out (http://manning.com/katz/), there is a discount code (50% off; valid Jan 23 to Feb 23): rails350


http://manning.com/katz/

http://manning.com/katz/

Resources:

Otherwise, your best bet seems to be searching for blog posts and reading the Rails 3 source (particularly rails.js).


Questions?


railroad closeup: http://www.flickr.com/photos/ericrice/25207672/sizes/m/in/photostream/railroad clock: http://www.flickr.com/photos/dougtone/4127322153/sizes/z/in/photostream/train picture: http://www.flickr.com/photos/eterno_retorno/2383602431/sizes/z/in/photostream/


http://www.flickr.com/photos/ericrice/25207672/sizes/m/in/photostream/

http://www.flickr.com/photos/ericrice/25207672/sizes/m/in/photostream/

http://www.flickr.com/photos/dougtone/4127322153/sizes/z/in/photostream/

http://www.flickr.com/photos/dougtone/4127322153/sizes/z/in/photostream/

http://www.flickr.com/photos/eterno_retorno/2383602431/sizes/z/in/photostream/

http://www.flickr.com/photos/eterno_retorno/2383602431/sizes/z/in/photostream/

ujs in rails 3

Technology

javascript javascript

pre rails

javascript unobtrusive

builtin javascript helpers

remote helpers link

ujs inrails

unobtrusive javascripttuesday

ajaxy helpers havemagic