Ajax|rails
v. Use of link_to_remote
Rails has several helper methods to implement Ajax in the template for your view. One of the simplest and most common methods is link_to_remote (). Let's examine a simple Web page-it implements the query time and has a link that users can click to get the current time. The application uses Ajax via Link_to_remote () to retrieve time and display it on a Web page.
My view template (index.rhtml) looks like this:
Ajax Demo
<%= Javascript_include_tag "Prototype"%>
What is it?
I don ' t have the time, but
<%= link_to_remote ("Click here",
: Update => "Time_div",
: URL =>{: Action =>: Say_when})%>
And I'll look at it up.
|
There are two interesting helper methods in the template above that are marked in bold. Javascript_include_tag () includes the prototype JavaScript library. All of the rails AJAX features use this JavaScript library-which is included in the rails distribution package.
The Link_to_remote () call here uses its simplest form, with 3 parameters:
1. The link text to display-in this case, "click here".
2. The ID of the DOM element, which contains the content that will be replaced with the action execution result, in this case time_div.
3. url-of the server-side action to invoke in this case, a say_when action is called.
Figure 1. Click on the link before |
My controller class looks like this:
Class Democontroller Applicationcontroller
def index
End
def Say_when
Render_text " The time is " + DateTime.now.to_s + " "
End
End |
Figure 2. After clicking the link |
Here the index action processor does nothing except let rails acknowledge that there is an indexing action and generates the Index.rhtml template outside. This Say_when action processor constructs an HTML fragment-it contains the current date and time. Figures 1 and 2 show how the index page is displayed before and after clicking the "click here" link.
When the user clicks the "Click here" link, the browser constructs a XMLHttpRequest object and sends it to the server-along with a url-that will invoke the Say_when action handler, it returns an HTML response fragment containing the current time. Client JavaScript receives the response and uses it to replace the contents of the <div> with a time_div ID.
It is also possible to insert this response instead of replacing the existing content:
<%= link_to_remote ("Click here",
: Update => "Time_div",
: URL => {: Action =>: Say_when},
:p osition => "after")%> |
I added an optional parameter: position=> "After"-it lets rails embed the returned HTML fragment after the target element (Time_div). Positional parameters can accept value before,after,top, and bottom-where top and bottom are inserted inside the target element, while before and after are inserted outside the target element.
In any case, now that I have added a positional parameter, the "Click here" link will not disappear. So I can constantly click on it and watch the new time added to the page.
Figure 3. Insert new content in Location options |
Neither this web page nor the URL displayed by the browser has changed. In such a similar small example, even a full page update will not save much time. However, when you have a more complex page and only need to update a small part of it, this difference will become very significant.
