Question

I am working on Rails 3.1 Jquery Ajax demo app listed here https://github.com/samnang/ajax_rails31_demo. I am trying to add code to delete comments. I have modified comments_controller.rb and added a destroy action. I also added a link to the app/views/_comment.html.erb to include a Destroy link. I am able to get the comment to delete and the comment count is decremented by 1, but the comment partial does not update removing the entry. Only upon page refresh does the page display correctly. Here is my code

app/controllers/comments_controller.rb

class CommentsController < ApplicationController
  respond_to :html, :js

  def index
    @comments = Comment.all
  end

  def create
    @comment = Comment.new(params[:comment])
    @comment.save

    respond_with @comment, :location => comments_url
  end

  def destroy
    @comment = Comment.find(params[:id])
    @comment.destroy

    respond_with @comment, :location => comments_url
  end
end

---

app/views/comments/index.html.erb

<% title "Comments for Ajax in Rails 3.1" %>

<div id="comments_count"><%= comments_count %></div>

<div id="comments">
   <%= render @comments %>
</div>

<h3>Add your comment:</h3>

<%= form_for Comment.new, :remote => true do |f| %>
<%= f.error_messages %>
   <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
   </p>
   <p>
    <%= f.label :content, "Comment" %><br />
    <%= f.text_area :content, :rows => '12', :cols => 35 %>
   </p>
  <p><%= f.submit %></p>
<% end %>

---

app/views/comments/_comment.html.erb

<div class="comment">
  <strong><%= comment.name %></strong>
  <em><%= comment.created_at.strftime('%b %d, %Y at %I:%M %p') %></em>
  <%= simple_format comment.content %>
  <%= link_to "Destroy", comment,:remote => true,  :confirm => "You Sure", :method => :delete %>
</div>

---

app/vews/comments/create.js.coffee

$('<%= escape_javascript(render(:partial => @comment))%>')
  .appendTo('#comments')
  .hide()
  .fadeIn()

$('#new_comment')[0].reset()

$('#comments_count').html '<%= comments_count %>'

---

app/views/comments/destroy.js.coffee

$('#new_comment')[0].reset()

$('#comments_count').html '<%= comments_count %>'

The destroy jquery portion is where I believe I am messing up. How do I reload the partial to remove the deleted comment?

Answer 1

I have updated my example on Github to support destroy action. In your example you didn’t remove dom element in your destroy.js.coffee. Check out full code on Github again or look at below snippets:

app/views/comments/_comment.html.erb

<div id=<%= dom_id(comment) %> class="comment">
  <strong><%= comment.name %></strong>
  <em>on <%= comment.created_at.strftime('%b %d, %Y at %I:%M %p') %></em>
  <%= link_to "Remove", comment, :method => :delete, :remote => true %>
  <%= simple_format comment.content %>
</div>

app/views/comments/destroy.js.coffee

$('#comments_count').html '<%= comments_count %>'

$('#<%= dom_id(@comment) %>')
  .fadeOut ->
    $(this).remove()