Subscribe Rss:


Wednesday, April 30, 2008

Using form_remote_tag in ruby on rails

Module ActionView::Helpers::PrototypeHelper

Prototype is a JavaScript library that provides DOM
manipulation,Ajaxfunctionality, and more traditional object-oriented
facilities for JavaScript.
This module provides a set of helpers to make it more
convenient to call functions from Prototype using Rails, including functionality to call remote
Rails methods (that is, making a background
request to a Rails action) using Ajax. This
means that you can call actions in your controllers without reloading the
page, but still update certain parts of it using injections into the DOM. A
common use case is having a form that adds a new element to a list without
reloading the page or updating a shopping cart total when a new item is

To be able to use these helpers, you must first include the Prototype JavaScript framework in your pages.
javascript_include_tag 'prototype'

Now you‘re ready to call a remote action either through a form

Common syntax

<% form_remote_tag :url => '/shipping' do -%>

<%= submit_tag 'Recalculate Shipping' %>

<% end %>

Once you have designated the target receiving element, you can optionally
provide details about exactly how to update the target. By default, the entire
innerHTML will be replaced with the server’s response. If you pass the :position
option, though, you can tell the JavaScript to insert the response relative to
the existing content. Possible values are
:position => :before
insert the server response just before the opening tag of the target ele-
:position => :top
insert the response just after the opening tag of the target element
:position => :bottom
insert the response just before the closing tag of the target element
:position => :after
insert the response just after the closing tag of the target element

My view template (index.rhtml) looks like:

<title>Ajax List Demo</title>
<%= javascript_include_tag "prototype" %>

<h3>Add to list using Ajax</h3>

<% form_remote_tag(:url => {:action => 'add_item' },
:update => 'my_listbox' ,
:position => :bottom) do %>

New item text:
<%= text_field_tag :newitem %>
<%= submit_tag "Add item with Ajax" %>
<% end %>
<ul id="my_listbox">
<li>Original item... please add more!</li>


Notice the two parts in bold. They define the beginning and end of the form. Because the form started with form_remote_tag() instead of form_tag(), the application will submit this form using XMLHttpRequest. The parameters to form_remote_tag() should look familiar:

* The update parameter specifies the id of the DOM element with content to update by the results of executing the action--in this case, my_list.
* The url parameter specifies the server-side action to call--in this case, an action named add_item.
* The position parameter says to insert the returned HTML fragment at the top of the content of the my_listbox element--in this case, a <ul> tag.

My controller class looks like:

class ListdemoController < ApplicationController
def index

def add_item
render_text "<li>" + params[:newitem] + "</li>"

The add_item action handler constructs an HTML list item fragment containing whatever text the user entered into the newitem text field of the form.