Saturday, March 31, 2007

RJS Templates for Rails

Ruby on Rails has excellent support for Ajax baked right into the framework. Remote JavaScript (RJS) templates build upon the Ajax support offered by Rails, allow to easily update multiple page elements.
This is a quick start to work with RJS.
$ rails RJS_Example

Create your controller:

RJS_Example> ruby script/generate controller Examples
exists app/controllers/
exists app/helpers/
create app/views/examples
create test/functional/
create app/controllers/examples_controller.rb
create test/functional/examples_controller_test.rb
create app/helpers/examples_helper.rb


Let's modify the default controllers now:
class ExamplesController < ApplicationController 
def index
end
def display
@statement = params[:statement]
end
end

Now, we should go to create our views.
Create in the $RJS_Example/app/views/examples create your index.rhtml
In the header include this tag
    <%= javascript_include_tag :defaults %>

The :defaults helps to add all the Scriptaculous visual effects and controls.

In the body, add this code.
    <%= form_remote_tag :url => { :action => 'display' },
:html => { :id => 'display-form' } %>
<%= text_field_tag 'statement', nil, :size => 40 %>
<%= submit_tag 'submit statement' %>
<%= end_form_tag %>

We use the form_remote_tag() helper instead of the form_tag().
:html option helps to reset the form after completion.
:url option specifies the controller action that receives the form data.
Finally the empty "div id=statement",The id provides a way to reference the element from the RJS template.

Create partial template app/views/examples/_example.rhtml
<%=h example %>

Create the RJS template: app/views/examples/display.rjs
page.insert_html :bottom, 'statements', :partial => 'example'
page.visual_effect :highlight, 'statements'
page.form.reset 'display-form'

The page object is an instance of the Rails JavaScriptGenerator.
the partial template app/views/examples/_example.rhtml is rendered, and the resulting content is inserted into the bottom of the statements div.

No comments: