Friday, June 29, 2007

UJS for Rails

Unobtrusive Javascript for Ruby On Rails

UJS for Rails makes it easy to apply behaviour to your page. Simply specify the element(s) of your page that you want the behaviour to apply to using CSS-style selectors and the event that you want to trigger the behaviour, and the Javascript that you want to run. In addition, you can write your behaviours using RJS-style Ruby to Javascript proxies.

Installation

You can install the UJS plugin from our Subversion repository with Rails’ plugin script:

ruby script/plugin install http://source.ujs4rails.com/current/unobtrusive_javascript

After Installing the plugin, run the following command

rake unobtrusive_javascript:install

If "
lowpro.js" is copied to your system means, installation is perfect...otherwise
please do the installation again :)

Once you’ve confirmed that lowpro.js is installed, the final
installation step is to open your routes.rb file and add the following
line into the Routes.draw block


ActionController::Routes.draw do |map|
UJS::routes
# your routes here.
end

Including The Scripts

Simply use javascript_include_tag to add the UJS scripts into the document’s head tag as shown:
<%= javascript_include_tag 'prototype', :unobtrusive %>

You can safely use :defaults and :unobtrusive together in the same javascript_include_tag call.
Applying Behaviours

apply_behaviour(css_selector, javascript, options={})

The first argument of apply_behaviours is an event:Selectors style selector that specifies both the CSS selector for the elements to target and the event to attach the behaviour to in this format: css_selector:event

The second argument is the behavior to apply. Pass a string to specify the JavaScript code to execute directly. There are two variables available to the behaviour JavaScript. In the JavaScript code, this refers to the triggering element and event refers to the JavaScript event object.

For Documentation, please refer this url -

http://www.ujs4rails.com/resources/usage-documentation

Note: UJS (and the lowpro extensions) requires at least Prototype 1.5.0 RC0.

0 comments: