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.