Modified Comment scaffolding to make CRUD interface all via AJAX.

app/controllers/comments_controller.rb

@@ -27,7 +27,7 @@ def new
     @comment = Comment.new
 
     respond_to do |format|
-      format.html # new.html.erb
+      format.html { render :new, :layout => ! request.xhr? } # new.html.erb
       format.xml  { render :xml => @comment }
     end
   end
@@ -46,9 +46,11 @@ def create
       if @comment.save
         format.html { redirect_to(@comment, :notice => 'Comment was successfully created.') }
         format.xml  { render :xml => @comment, :status => :created, :location => @comment }
+        format.js
       else
         format.html { render :action => "new" }
         format.xml  { render :xml => @comment.errors, :status => :unprocessable_entity }
+        format.js
       end
     end
   end
@@ -78,6 +80,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_to(comments_url) }
       format.xml  { head :ok }
+      format.js
     end
   end
 end

app/helpers/comments_helper.rb

@@ -1,2 +1,5 @@
 module CommentsHelper
+  def new_comment_link
+    link_to 'New Comment', new_comment_path, :remote => true, :'data-type' => 'html', :id => 'new-comment-link'
+  end
 end

app/views/comments/_comment.html.erb

@@ -0,0 +1,7 @@
+<tr class='comment' id='comment-<%= comment.id %>'>
+  <td><%= comment.subject %></td>
+  <td><%= comment.body %></td>
+  <td><%= link_to 'Show', comment %></td>
+  <td><%= link_to 'Edit', edit_comment_path(comment) %></td>
+  <td><%= link_to 'Destroy', comment, :confirm => 'Are you sure?', :method => :delete, :remote => true %></td>
+</tr>

app/views/comments/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for(@comment) do |f| %>
+<%= form_for(@comment, :remote => true) do |f| %>
   <% if @comment.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(@comment.errors.count, "error") %> prohibited this comment from being saved:</h2>

app/views/comments/create.js.erb

@@ -0,0 +1,8 @@
+<% unless @comment.errors.any? %>
+  $('#comments').append( '<%= escape_javascript(
+    render @comment
+  ) %>' );
+  $('#new-comment-form-container').replaceWith( '<%= new_comment_link %>' );
+<% else %>
+  $('#new_comment').find('#error_explanation').html( '<%= @comment.errors.full_error_messages %>' );
+<% end %>

app/views/comments/destroy.js.erb

@@ -0,0 +1 @@
+$('#comment-<%= @comment.id %>').remove();

app/views/comments/index.html.erb

@@ -1,6 +1,6 @@
 <h1>Listing comments</h1>
 
-<table>
+<table id='comments'>
   <tr>
     <th>Subject</th>
     <th>Body</th>
@@ -9,17 +9,9 @@
     <th></th>
   </tr>
 
-<% @comments.each do |comment| %>
-  <tr>
-    <td><%= comment.subject %></td>
-    <td><%= comment.body %></td>
-    <td><%= link_to 'Show', comment %></td>
-    <td><%= link_to 'Edit', edit_comment_path(comment) %></td>
-    <td><%= link_to 'Destroy', comment, :confirm => 'Are you sure?', :method => :delete %></td>
-  </tr>
-<% end %>
+  <%= render @comments %>
 </table>
 
 <br />
 
-<%= link_to 'New Comment', new_comment_path %>
+<%= new_comment_link %>

app/views/comments/new.html.erb

@@ -1,5 +1,7 @@
-<h1>New comment</h1>
-
-<%= render 'form' %>
-
-<%= link_to 'Back', comments_path %>
+<div id='new-comment-form-container'>
+  <h1>New comment</h1>
+
+  <%= render 'form' %>
+  
+  <%= link_to 'Back', comments_path %>
+</div>

app/views/comments/show.html.erb

@@ -1,15 +1,14 @@
-<p id="notice"><%= notice %></p>
+<table>
+  <tr>
+    <th>Subject</th>
+    <th>Body</th>
+    <th></th>
+    <th></th>
+    <th></th>
+  </tr>
+  <%= render @comment %>
+</table>
+
+<br />
 
-<p>
-  <b>Subject:</b>
-  <%= @comment.subject %>
-</p>
-
-<p>
-  <b>Body:</b>
-  <%= @comment.body %>
-</p>
-
-
-<%= link_to 'Edit', edit_comment_path(@comment) %> |
 <%= link_to 'Back', comments_path %>

public/javascripts/application.js

@@ -1,2 +1,8 @@
 // Place your application-specific JavaScript functions and classes here
 // This file is automatically included by javascript_include_tag :defaults
+
+$(document)
+  .delegate('#new-comment-link', 'ajax:success', function(e, data, status, xhr){
+    $(this).replaceWith(xhr.responseText);
+  });
+