An Introduction to using AJAX with Rails ...

Test the BlogDemo Project

   1. Open the BlogDemo project.
   2. Note, if you are starting with the provided BlogDemo project, you will also need to create the BlogDemo_development database and run the migrations.
   3. Run the project and browse to http://localhost:3000/blog to verify that it works.

The Plan

Currently, when a new comment is added, the entire page - blog entry and comments - are reloaded. Instead, we will use AJAX to only reload the comments. Just for fun, we will also show how to apply a visual effect to highlight the most recently added comment.
Preparation

First we are going to move the fragment of rhtml that we want to dynamically reload into a partial template.

   1. Ctrl+N to create a new RHTML file. Name the file _comments and place it in the appviewslog folder.
   2. Alt+Shift+O to open show.rhtml.
   3. Cut the following block of code from show.rhtml:



      And paste it into _comments.rhtml, replacing all existing content in _comments.rhtml.

   4. Return to show.rhtml and insert the following call to the partial from where you cut the code. Note, the <div> will be used later to reference this chuck of code when we dynamically reload the comments:

      <div id="comments">
          <%= render(:partial => "comments", :object => @post_comments) %>
      </div>

   5. Test your changes. The application should behave as it did before.

Change the POST to an XMLHTTPRequest

   1. First, let is make sure the JavaScript libraries we are going to use are included in our application. Alt+Shift+O to open blog.rhtml and add the following line below the stylesheet_link_tag:

       <%= javascript_include_tag :defaults  %>

      We are passing :defaults as the source because we are going to be using the Prototype and Scriptaculous libraries that come bundled with Rails.

   2. In show.rhtml, change the form_tag, which performs a HTTP POST, to a form_remote_tag, which performs an XMLHTTPRequest, as follows:

      <% form_remote_tag :url => {:action => "post_comment"} do %>


   3. Test. The entire show page is still reloaded on submit. This is because the post_comment action in blog_controller forces the reload by calling the show action.



   4. Comment out the redirect_to call in the post_comment action and try again. Things are getting worse, as now we get a Template is missing error:
source: weblogs
visit part 2

 View Full Story.