Rorguru-blogs

AJAX IN RAILS

IN THIS CHAPTER

What is AJAX
Features of AJAX
Advantage of AJAX
Rail and AJAX
Helpers method

What is Ajax :

AJAX is not a new programming language. It is one type way to use existing standards. It helps to create better, faster, and more user friendly your web applications. AJAX stands for Asynchronous JavaScript And XML.

Features of AJAX :

AJAX is not a new programming language. It is a new technique using existing standards.
AJAX uses asynchronous data transfer (HTTP requests).
AJAX application is browser and platform independent.
With AJAX, JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object.
With this XMLHttpRequest object, the JavaScript can communicate data with a web server, without refreshing the page.

Advantage of AJAX :

AJAX technique helps to internet application smaller, faster and user interactive.
AJAX application is browser and platform independent.
In traditional web page if we want to get some data or information then at first we give some information about related data and press submit button then a new page comes that fetch the required data from webserver.so every time a new page created , that is more time consumed process.but in AJAX a web page can make a request to server, and get a response from a web server without reloading the page. we will stay on the same page, and we will not notice that scripts request pages, data send to server in the background.

Rails and AJAX :

Rails have a simple, consistent model for implements Ajax operations. Once the browser has displayed the initial web page, different user actions cause it to display a new web page or trigger an Ajax operation :

Data associated with the trigger is sent asynchronously to an action handler on the server via XMLHttpRequest.
The server-side action handler takes some action based on the data, and returns response.
The client-side JavaScript created automatically by Rails. It receives the HTML fragment and uses it to update a specified part of the current page's HTML, often the content of a <div> tag.

Helpers methods :

In Rails has several helper methods for implementing Ajax in view's templates. The most common helpers methods in Rails are :

Prototype :

form_remote_for

form_remote_tag

link_to_remote

observe_field

observe_form

periodically_call_remote

remote_form_for

submit_to_remote

Scriptaculous :

draggable_element

drop_receiving_element

sortable_element

visual_effect

RJS :

hide

insert_html

remove

replace

replace_html

show

toggle

It has different types of parameter :

:loading:		Called when the remote data is being loaded by the browser.
:loaded:		Called when the browser has completed receiving the remote document.
:interactive:		Called when the user can interact with the remote data, even though it has not finished loading.
:success:		Called when the XMLHttpRequest is successfully completed.
:failure:		Called when the XMLHttpRequest is failed.
:complete:		Called when the XMLHttpRequest is complete whether it was successful or failed.

The other helpers methods are :

build_callbacks
build_observer
button_to_remote
evaluate_remote_response
form_remote_for
form_remote_tag
method_option_to_se
observe_field
observe_form
options_for_ajax
periodically_call_remote
remote_form_for
remote_function
submit_to_remote
update_page
update_page_tag

Example :

This is simple example

Welcome to simple Ajax application

Click here

the new text will appear here

If you click the click here portion the next action will appear here without refreshing the page.

Welcome to simple Ajax application

Click here

this text is downloaded using ajax
The Time is :Fri Jan 23 13:59:02 +0530 2009

The code of two view page are :

In Index.rhtml

<html >
<head>
<title> simple Ajax application</title>
<%= javascript_include_tag "prototype" %>
</head>
<body>
<h2> Welcome to simple Ajax application</h2>
<p>
<%= link_to_remote("click here",:update => "displayDiv", :url => {:action => :replacer})%>
<div id = "displayDiv" >the new text will appear here</div>
</p>
</body>
</html>

In replacer.rhtml

this text is downloaded using ajax
The Time is :<%= Time. now %>