01 August 2006
Release: Unobtrusive Javascript For Rails 0.2

Dan Webb and I are happy to announce the latest release of the Unobtrusive Javascript plugin for Rails. This release packs in lots of cool new features, a few changes to old ones and some performance enhancements.

Update 21/08/2006: The latest version of this plugin is 0.3 - please see this post and the official UJS website for more information.

As I mentioned in my previous article, Dan had been working on his own plugin and we've now pooled our efforts and are working on the single plugin together, with much of Dan's JavascriptProxy functionality from his own plugin now rolled into Unobtrusive Javascript for Rails 0.2.

Here's a full list of changes and additions:

  • UPDATED: register_js_behaviour has been renamed to apply_behaviour and now takes an optional options hash and a block, which allows you to write your behaviours in pure Ruby. register_js_behaviour remains as an alias for backwards compatibility but is officially deprecated; it will probably be removed in the next release. There are also aliases for the American spelling of behaviour for our friends on the other side of the pond.
  • NEW: You can now attach behaviours directly to elements using content_tag and tag by passing in javascript event handlers in the HTML options hash (:onclick, :onmousedown etc.); they'll be extracted to the external behaviours file automatically.
  • UPDATED: The core Rails AJAX/Javascript helpers (link_to_remote, button_to_function, link_to_function, form_remote_tag etc.) now work out of the box.
  • NEW: There is no need to explicitly specify an HTML ID for the elements you want to attach behaviour to - if you don't, one will be generated automatically for you.
  • NEW: Options to render behaviour rules directly in your page inside script blocks instead of in the external behaviour file.
  • FIXED: Behaviours inside AJAX-loaded partials will now work.
  • UPDATED: event:Selectors and domReady javascript libraries are replaced with the lowPro.js library by Dan Webb
  • UPDATED: Javascript behaviours now have access to a single variable - event. To access the element the behaviour was applied to, use this.
  • UPDATED: Behaviours can now cancel the default action by returning false as well as using Event.stop(event). This also works properly in Safari.
  • FIXED: The required javascript files will be copied to your public folder automatically on installation. There is also a rake task for copying files across when upgrading the plugin.
  • NEW: Documentation!

There is currently only one known issue:

  • Behaviours are not being reapplied after an AJAX request in Opera 9

Here's a look at some of the new features, starting with writing behaviours using pure Ruby:


<% apply_behaviour "#mylink:click" do |page, element|
    page.alert "You clicked me! Now watch me fade..."
    element.visual_effect :fade
  end %>

Attaching behaviours directly to elements with content_tag:


<%= content_tag "div", "My funky box", :onclick => "alert('Hello World!')" %>

We want you to really put this release through its paces - does it conflict with other plugins? Does it cause unexpected problems with Rails itself? Are there any other features you'd like to see? The place to report these feature requests and bugs is of course the Agile Evolved Open Source Trac.

Further Information:

Installation note: some people have reported that the plugin fails because the Rails plugin installation script installs the plugin to rel-0.2 instead of unobtrusive_javascript. This is a failing of Rails' plugin installation system in that it doesn't correctly handle the typical tags/trunk/branches Suvbersion repository layout. If you install the plugin using script/plugin, make sure you rename the rel-0.2 folder to unobtrusive_javascript. If you are using svn:externals, you can edit your externals file manually:


$ svn propedit svn:externals vendor/plugins

Then add the following line to it:


unobtrusive_javascript http://opensource.agileevolved.com/svn/root/rails_plugins/unobtrusive_javascript/tags/rel-0.2

Future Plans

So what do we have planned for 0.3? More patches to Rails' more complicated built-in helpers, such as observe_form and observe_field and periodically_call_remote. We also have some plans for some new helpers designed especially for apply_behaviour; how about some of this:


<% apply_behaviour "div.draggable", make_draggable %>
<% apply_behaviour "li.sortable", make_sortable %>
<% apply_behaviour "#searchbox", make_autocomplete %>

Comments open!

Last updated on 04 Sep 2006 at 20:09 by luke. Filed Under: Plugins, Rails.

Return to home page | Check out my tumblelog

21 Comments on this article

1. Comment by DeLynn on 01 Aug 2006 at 17:08

I was actually playing with your original release last weekend, but then noticed all the subversion activity, so I decided to hold off. Now I’m really glad I did, and I can’t wait to kick the tires on this bad boy!

2. Comment by Pete Lasko on 01 Aug 2006 at 18:08

Lets just say this is something I think should be included in rails. I know, I know, “We don’t want the trunk to get bloated!”, but seriously, these are Web Development best practices. The thing that I’ve had the hardest time accepting is DHH’s (and most of the rest of the core team) “who gives a crap” attitude toward keeping the views clean. After spending the time to learn how to write unobtrusive javascript, its frustrating that there isn’t a solution within rails. Looks like you guys have it. Thanks for doing the important things the core is ignoring. I think your solution looks great so far.

3. Comment by Luke Redpath on 01 Aug 2006 at 18:08

Pete, thanks for the comments.

It might surprise you, but I’m actually happy to see this stay separate as a plugin. In fact, I’d like to see more of the core extracted to plugins – I know that web services is on its way out – I’d also like to see scaffolding go the plugin route and Dan Webb and I were chatting earlier about how we think the built-in prototype/scriptaculous helpers should be extracted to, reducing the dependency on prototype.

The biggest drawback is that rails plugin management is far from perfect – if you’ve heard of RaPT by Geoffrey Grosenbach then you’ll know there are moves to improve this. I’m also working on the RaPT project as well now and I’ve got quite a few ideas on improving this situation which I’ll probably blog about in the near future.

4. Comment by Michael Schuerig on 01 Aug 2006 at 18:08

I like the idea a lot, but don’t have the time to play with it right now. Would you mind to show what the corresponding HTML/JavaScript for the above snippets would be?

5. Comment by Luke Redpath on 01 Aug 2006 at 19:08

Michael (and anybody else), there’s a small example Rails app that has some examples on how to use the plugin. You can browse the source and download it and give it a go.

Bear in mind the example app is tied to the plugin’s trunk, not the 0.2 release.

6. Comment by Daniel Morrison on 02 Aug 2006 at 04:08

Great work! It is great to see the promotion of best-practices.

I too played with your older releases, and I’m glad to see all the progress. This makes Doing the Right Thing so much easier that every Rails developer should feel ashamed if they don’t/can’t/won’t extract their JS.

7. Comment by Andrew Bruce on 02 Aug 2006 at 10:08

The script/install line seems to install to vendor/plugins/rel-0.2 ?

8. Comment by Luke Redpath on 02 Aug 2006 at 10:08

Andrew – unfortunately thats a failling of the current Rails plugin installation system – it doesn’t handle a normal subversion repo structure. You should be able to just rename the folder to unobtrusive_javascript (although it should work named as rel-0.2 as well).

9. Comment by Andrew Bruce on 02 Aug 2006 at 11:08

Thanks. Another thing I noticed, your:

<% applybehaviour ”#mylink:click” do |page, element| page.alert “You clicked me! Now watch me fade…” page.visualeffect :fade, element end %>

Seems to result in the error ‘object references itself’. I’d really like to be able to set a load of onclicks using an anchor’s href to decide what dom id to toggle, but this problem seems to prevent that.

Am I being too stupid?

10. Comment by Luke Redpath on 02 Aug 2006 at 11:08

Andrew, my example was actually incorrect. All you need to do is element.visual_effect :fade. I’ve updated my post.

11. Comment by Andrew Bruce on 02 Aug 2006 at 14:08

Thought I’d add this as I spent about an hour looking for it (found in your examples repo):

To give a ‘return false;’ within a block: apply_behaviour ’#blah:click’ do |page,element,event| # behaviours go here event.stop end

12. Comment by Damien Tanner on 02 Aug 2006 at 16:08

Superb work Luke and Dan. I’m looking forward to using this in our next project!

13. Comment by Andrew Bruce on 04 Aug 2006 at 16:08

Tried it with caching – same problem as with the back button. Perhaps the external files could be generated and stored instead of being dynamic?

Your trac seems to be down. And this comment thing makes me save a php file.

That’s a lot of negatives. The project’s great, though!

14. Comment by Luke Redpath on 04 Aug 2006 at 16:08

Not sure whats wrong with the commenting system Andrew.

We have plans to sort caching out in a future version. It will be in there by 1.0.

15. Comment by Pete Lasko on 08 Aug 2006 at 20:08

Just wanted to pop in here again and say I think this is great. I don’t mind that you guys are putting it in a plug-in as much as I mind that it wasn’t designed into the mix in the first place. You’re plugging an obvious, gaping hole in rails, and its something I don’t imagine is a simple problem. So keep up the good work.

16. Comment by Jamie van Dyke on 10 Aug 2006 at 19:08

Luke, your plugins keep impressing me. It’s great to see UK talent strutting it’s stuff!

17. Comment by Dean Edwards on 11 Aug 2006 at 10:08

How about a demo page? I’d like to see how unobtrusive it is.

18. Comment by Luke Redpath on 11 Aug 2006 at 11:08

Dean, we’ll get a demo page up eventually – hopefully for the next release. In the meantime, if you are setup to run Rails apps locally, there is a rough example app here.

19. Comment by Dean Edwards on 11 Aug 2006 at 19:08

@Luke – I don’t have Rails installed. I’ll wait until the next release.

20. Comment by Peter on 17 Aug 2006 at 09:08

I am sorry….

Where can I download the script?

21. Comment by Luke Redpath on 17 Aug 2006 at 12:08

Peter, the plugin is located in the subversion repository here:

http://opensource.agileevolved.com/svn/root/railsplugins/unobtrusivejavascript/tags/rel-0.2

Return to home page | Check out my tumblelog

Commenting on this article is now closed