Ajaxify your Rails Applications

by Saurabh Bhatia

November 10, 2009

Ajaxify your Rails Applications

Picking up from our previous, Employee Information System, we will add some beautiful effects to the app using AJAX. AJAX stands for Asynchronous Javascript and XML and is implemented inside the Rails framework in its own sweet way.

Ajax runs as a layer just behind the browser, which retrieves the data and displays it without actually refreshing the entire page. In the back end it talks to the server and displays the results to the end user and for the user alone that part of the page with the updated information is reloaded instead of the whole page.

What Ajax in Rails is About?

Rails implements Ajax as a part of the framework and is done in a very simple way. The actions are carried out according to user's actions. So, there is an action which triggers the beginning of the AJAX effect. The Data (maybe a id, form values, etc.) is sent to the server's action handler using an XMLHttpRequest, based on the action performed by the user. Once this happens, procession of the data is done on the server side and returns the HTML fragment which contains the resultant data or dataset.

Ajaxifying Our Employee Management System

In order to start, we will first include all the default JavaScript libraries available by default with Rails in our application layouts that sit inside apps\views\employees\layouts\employees.html.erb in the header portion of the file.

  <%= javascript_include_tag :defaults %>

The default JavaScript libraries with Rails are Prototype and Scriptaculous and the above tag allows the views to access the methods inside these two js files.

The first traces of AJAX can be added in our linkages. In our previous tutorial, we used link_to in order to create links and map actions to it. We will now use a slightly modified version of this, link_to_remote which includes a new field, the update field. The update field refers to the DOM element ID. The Ajax actions store the retrieved data in that particular element.

  <%= link_to_remote 'Destroy', {:action => 'destroy', :id => list, :update => 'employees'}, :confirm => "Are you sure?" %>

We modify our controller, in destroy action. The @employee.destroy method does the work of deleting the record from the database, and the addition, render :partial method cleverly updates the part of the page with the latest record from the database, which does not contain the deleted record anymore.

  def destroy
      @employee = Employee.find(params[:id])
      @employee.destroy
      reder :partial => "employees"
  
      respond_to do |format|
        format.html { redirect_to(employees_url) }
        format.xml  { head :ok }
      end
    end
  end

Figure 1.

Partial, as the name suggests is a partial web page which contains only a set of code which needs to go into a particular section of the web page. For example, you may consider sidebar, header, footer as a partial. The convention to name the partial is to keep an _ (underscore) before the name of the view.

Ajaxify your Forms

The AJAX forms use a method called form_remote_tag. This method submits the form via a server side Request handler by the name XMLHTTPRequest. It also contains an update element and is a modified version of form_tag().

  <%= form_remote_tag(:url => {:action => 'create'}, :update  => 'index') %>

      <%= f.label :name %><br />
      <%= f.text_field :name %>
    </p>
    <p>
      <%= f.label :designation %><br />
      <%= f.text_field :designation %>
    </p>
    <p>
     <%= f.label :address %><br />
      <%= f.text_area :address %>

The user now fills in the employee details in the specified text boxes and submits the form. The control goes to the create action and sends the update response to the index page and reloads the page with the converted partial without refreshing the page.

There are several other methods which help in beautifying the applications like, the observe forms with which we can add events based on the outputs, make DOM Object, the updated element draggable, define mouse over, slider effects, etc.

Conclusion

There are many available JavaScript and AJAX libraries like Mootools , Sproutcore and JQuery which can help add a lot of great effects to the apps and increase the usability of the web applications. Some of them are purely JavaScript and some are written in Ruby (Sproutcore) so as to bring ease of use.

In the coming tutorials we will work on adding Login, encrypting passwords and managing sessions with our Rails applications and further look into adding each of these libraries in our apps for various purposes like datagrids, photo galleries and more.