Rails 3.1 Jquery Ajax CRUD操作

时间:2011-09-27 19:03:29

标签: ajax jquery ruby-on-rails-3.1 crud

我正在研究这里列出的Rails 3.1 Jquery Ajax演示应用程序https://github.com/samnang/ajax_rails31_demo。我想添加代码来删除评论。我修改了comments_controller.rb并添加了一个destroy动作。我还添加了一个指向app / views / _comment.html.erb的链接,以包含一个Destroy链接。我能够删除注释,注释计数减1,但注释部分不会更新删除条目。只有页面刷新才能正确显示页面。这是我的代码

应用程序/控制器/ 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

应用程序/视图/评论/ 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 %>

应用程序/视图/评论/ _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>

应用程序/ vews /评论/ create.js.coffee

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

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

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

应用程序/视图/评论/ destroy.js.coffee

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

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

破坏jquery部分是我认为我搞砸的地方。如何重新加载部分以删除已删除的评论?

1 个答案:

答案 0 :(得分:2)

我已经在Github上更新了我的例子以支持销毁行动。在您的示例中,您没有删除destroy.js.coffee中的dom元素。再次查看Github上的完整代码或查看以下代码段:

应用程序/视图/评论/ _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>

应用程序/视图/评论/ destroy.js.coffee

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

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