tag.
An Ajax request to the server can also return any arbitrary data, but I'll talk only about HTML fragments. The real beauty is how easy Rails makes it to implement all of this in your web application.
Using link_to_remote
Rails has several helper methods for implementing Ajax in your view's templates. One of the simplest yet very versatile methods is link_to_remote(). Consider a simple web page that asks for the time and has a link on which the user clicks to obtain the current time. The app uses Ajax via link_to_remote() to retrieve the time and display it on the web page.
My view template (index.rhtml) looks like:
Ajax Demo <%=
javascript_include_tag "prototype" %> What
time is it?
I don't have the time, but
<%= link_to_remote( "click here", :update => "time_div", :url =>{ :action
=> :say_when }) %> and I will look it up.
There are two helper methods of interest in the above template, marked in bold. javascript_include_tag() includes the Prototype JavaScript library. All of the Rails Ajax features use this JavaScript library, which the Rails distribution helpfully includes.
The link_to_remote() call here uses its simplest form, with three parameters:
- The text to display for the link--in this case, "click here".
- The id of the DOM element containing content to replace with the results of executing the action--in this case,
time_div. - The URL of the server-side action to call--in this case, an action called
say_when.
Figure 1. Before clicking on the link
My controller class looks like:
class DemoController < ApplicationController def index end def say_when render_text "The time is " + DateTime.now.to_s + "
" end end
Figure 2. After clicking on the link
The index action handler doesn't do anything except letting Rails recognize that there is an index action and causing the rendering of the index.rhtml template. The say_when action handler constructs an HTML fragment that contains the current date and time. Figures 1 and 2 show how the index page appears both before and after clicking on the "click here" link.
When the user clicks on the "click here" link, the browser constructs an XMLHttpRequest, sending it to the server with a URL that will invoke the say_when action handler, which returns an HTML response fragment containing the current time. The client-side JavaScript receives this response and uses it to replace the contents of the with an id of
time_div.
It's also possible to insert the response, instead of replacing the existing content:
I added an optional parameter :position => "after", which tells Rails to insert the returned HTML fragment after the target element (time_div). The position parameter can accept the values before, after, top, and bottom. top and bottom insert inside of the target element, while before and after insert outside of the target element.
In any case, now that I added the position parameter, my "click here" link won't disappear, so I can click on it repeatedly and watch the addition of new time reports.
Figure 3. The position option inserts new content
The web page doesn't change, and neither does the URL being displayed by the browser. In a trivial example like this, there has not been much of a savings over an entire page refresh. The difference becomes more noticeable when you have a more complicated page of which you need to update only a small portion.
Ruby on Rails can be integrated
in interesting web design studio, kuzmanovic design
Related Links
Edit
Ruby On Rails Tutorials
- Rolling with Ruby on Rails - Curtis Hibbs of ONLamp.com offers his first excellent introduction to Ruby on Rails. This is the article that got me really excited about RoR.
- Rolling with Ruby on Rails, Part 2 - The sequel to Curtis Hibbs excellent series of articles.our Days on Rails (PDF) - a great tutorial that is broken down into simple tasks that you can do over a four day period. To be quite honest, this tutorial only takes about 2 hours, but nonetheless it is very well organized!
- Really G Fetting Started in Rails - Amy Hoy has a great tutorial that not only covers RoR, but also introduces the reader to many of the basic concepts of the very cool Ruby scripting language.
- Tutorial in Ruby on Rails - is a basic tutorial aimed at newbies.
- Fast-track your Web apps with Ruby on Rails - IBM jumps into the sandbox with an excellent (as usual) tutorial to get you on your feet fast.
- Getting Your Feet Wet With Ruby on Rails - Talking about getting on your feet fast, this one from Webmonkey promises to get them wet too!
- How to make a todo list program with Rails - Another excellent introductory tutorial that actually helps you build something useful!
- Ajax on Rails - Curtis Hibbs offers part 3 of his look at RoR
- Many to Many Tutorial for Rails (PDF) - is a nice document that begins to delve into some of the more complex parts of web application programming, but in fine Ruby on Rails manner, it's really not too complicated!
- Distributing Rails Applications - A Tutorial - So now you've built your RoR application, how to you push it to a production server? This tutorial covers the bases.
- Installing Ruby on Rails with Lighttpd and MySQL on Fedora Core 4 - and of course this list wouldn't be complete without a shameless bit of self-promotion, this tutorial promises what it says. Other install tutorials can be found here, here and here!
Competitors
Edit
Ajax Projects
Alexa
Contributions
Discussion
