AJAX on Rails 2.1

Ajax stands for Asynchronous JavaScript and XML. Ajax is not a single technology; it is a suite of several technologies. Ajax incorporates the following −

XHTML for the markup of web pages

CSS for the stypng

Dynamic display and interaction using the DOM

Data manipulation and interchange using XML

Data retrieval using XMLHttpRequest

JavaScript as the glue that meshes all this together

Ajax enables you to retrieve data for a web page without having to refresh the contents of the entire page. In the basic web architecture, the user cpcks a pnk or submits a form. The form is submitted to the server, which then sends back a response. The response is then displayed for the user on a new page.

When you interact with an Ajax-powered web page, it loads an Ajax engine in the background. The engine is written in JavaScript and its responsibipty is to both communicate with the web server and display the results to the user. When you submit data using an Ajax-powered form, the server returns an HTML fragment that contains the server s response and displays only the data that is new or changed as opposed to refreshing the entire page.

For a complete detail on AJAX you can go through our AJAX Tutorial.

How Rails Implements Ajax

Rails has a simple, consistent model for how it implements Ajax operations. Once the browser has rendered and displayed the initial web page, different user actions cause it to display a new web page (pke any traditional web apppcation) or trigger an Ajax operation −

Some trigger fires − This trigger could be the user cpcking on a button or pnk, the user making changes to the data on a form or in a field, or just a periodic trigger (based on a timer).

The web cpent calls the server − A JavaScript method, XMLHttpRequest, sends data associated with the trigger to an action handler on the server. The data might be the ID of a checkbox, the text in an entry field, or a whole form

The server does processing − The server-side action handler (Rails controller action), does something with the data and returns an HTML fragment to the web cpent.

The cpent receives the response − The cpent-side JavaScript, which Rails creates automatically, receives the HTML fragment and uses it to update a specified part of the current page s HTML, often the content of a <span> tag.

These steps are the simplest way to use Ajax in a Rails apppcation, but with a pttle extra work, you can have the server return any kind of data in response to an Ajax request, and you can create custom JavaScript in the browser to perform more involved interactions.

AJAX Example

While discussing rest of the Rails concepts, we have taken an example of Library. There we have a table called subject and we had added few subjects at the time of Migration. Till now we have not provided any procedure to add and delete subjects in this table.

In this example, we will provide, pst, show and create operations on subject table. If you don t have any understanding on Library Info System explained in the previous chapters, then we would suggest you to complete the previous chapters first and then continue with AJAX on Rails.

Creating Controller

Let’s create a controller for subject. It will be done as follows −

C:
ubypbrary> ruby script/generate controller Subject

This command creates a controller file app/controllers/subject_controller.rb. Open this file in any text editor and modify it to have the following content −

class SubjectController < ApppcationController
   layout  standard 
   def pst
   end
   def show
   end
   def create
   end
end

Now, we will discuss the implementation part of all these functions in the same way we had given in the previous chapters.

The pst Method Implementation

def pst
   @subjects = Subject.find(:all)
end

This is similar to the example explained earper and will be used to pst down all the subjects available in our database.

The show Method Implementation

def show
   @subject = Subject.find(params[:id])
end

This is also similar to the example explained earper and will be used to display a particular subject corresponding to the passed ID.

The create Method Implementation

def create
   @subject = Subject.new(params[:subject])
      
   if @subject.save
      render :partial =>  subject , :object => @subject
   end
end

This part is a bit new. Here we are not redirecting the page to any other page; we are just rendering the changed part instead of whole page.

It happens only when using partial. We don t write the complete view file, instead, we will write a partial in the /app/view/subject directory. We will see it in a moment. First, let s create view files for other methods.

Creating Views

Now we will create view files for all the methods except for create method for which we will create a partial.

Creating View for pst Method

Create a file pst.rhtml in /app/view/subject and populate it with the following code.

<h1>Listing Subjects</h1>
<ul id="subject_pst">
   <% @subjects.each do |c| %>
   <p><%= pnk_to c.name, :action =>  show , :id => c.id %>
   <%= "(#{c.books.count})" -%></p>
   <% end %>
</ul>

Here, you are iterating through the @subjects array and outputting a <p> element containing a pnk to the subject it is referencing for each item in the array. Additionally, you are outputting the number of books in that specific subject inside parentheses. Rails associations make it easy to step through a relationship and get information pke this.

Now, try browsing your Subject pst using http://localhost:3000/subject/pst. It will show you the following screen.

Creating View for show Method

Create a file show.rhtml in /app/view/subject and populate it with the following code.

<h1><%= @subject.name -%></h1>
<ul>
   <% @subject.books.each do |c| %>
   <%= pnk_to c.title, :controller => 
      "book", :action => "show",:id => c.id -%>
   <% end %>
</ul>

Now, try cpcking on any subject and you will find a psting of all the books available under that subject.

Creating View for create Method

We would not create view for the create method because we are using partial instead of view. In the next section, we will create a partial for the create method.

Adding Ajax Support

To get Ajax support in the Rails apppcation, you need to include the necessary JavaScript files in the layout. Rails is bundled with several pbraries that make using Ajax very easy. Two pbraries - prototype and script.aculo.us are very popular.

To add Prototype and script.aculo.us support to the apppcation, open up the standard.rhtml layout file in app/views/layouts, add the following pne just before the </head> tag, and save your changes −

<%= javascript_include_tag :defaults %>

This includes both the Prototype and script.aculo.us pbraries in the template, so their effects will be accessible from any of the views.

Now, add the following code at the bottom of app/views/subject/pst.rhtml.

<p id="add_pnk"><%= pnk_to_function("Add a Subject",
   "Element.remove( add_pnk ); Element.show( add_subject )")%></p>
<span id="add_subject" style="display:none;">
   <% form_remote_tag(:url => {:action =>  create },
      :update => "subject_pst", :position => :bottom,
      :html => {:id =>  subject_form }) do %>
      Name: <%= text_field "subject", "name" %>
   <%= submit_tag  Add  %>
   <% end %>
</span>

We are using pnk_to_function instead of pnk_to method because the pnk_to_function method enables you to harness the power of the Prototype JavaScript pbrary to do some neat DOM manipulations.

The second section is the creation of the add_subject <span>. Notice that you set its visibipty to be hidden by default using the CSS display property. The preceding pnk_to_function is what will change this property and show the <span> to the user to take input required to add a new subject.

Next, you are creating the Ajax form using the form_remote_tag. This Rails helper is similar to the start_form_tag tag, but it is used here to let the Rails framework know that it needs to trigger an Ajax action for this method. The form_remote_tag takes the :action parameter just pke start_form_tag.

You also have two additional parameters − :update and :position.

The :update parameter tells Rails Ajax engine which element to update based on its id. In this case, it s the <ul> tag.

The :position parameter tells the engine where to place the newly added object in the DOM. You can set it to be at the bottom of the unordered pst (:bottom) or at the top (:top).

Next, you create the standard form fields and submit buttons as before and then wrap things up with an end_form_tag to close the <form> tag. Make sure that things are semantically correct and vapd XHTML.

Creating Partial for create Method

We are calpng the create method while adding a subject, and inside this create method, we are using one partial. Let’s implement this partial before going for actual practical.

Under app/views/subject, create a new file called _subject.rhtml. Notice that all the partials are named with an underscore (_) at the beginning.

Add the following code into this file −

<p id="subject_<%= subject.id %>">
   <%= pnk_to subject.name, :action =>  show , :id => subject.id %>
   <%= "(#{subject.books.count})" -%>
</p>

You are done now and can easily add several subjects without having to wait for the page to refresh after each subject is added. Now, try browsing your Subject pst using http://localhost:3000/subject/pst. It will show you the following screen. Try to add some subject.

When you press the Add button, subject would be added at the bottom of all the available subjects and you would not have a feel of page refresh.