Javascript 使用AJAX rails从视图中删除注释

我有一个有评论的目录应用程序。我使用

remote:true

添加和删除注释，并希望使用Jquery在视图中淡出它们

我如何获得我想在视图中淡出的评论的引用？我可以很好地删除评论，但我不知道如何在我的视图中淡出评论

这是我的控制器：

class CommentsController < ApplicationController
  def create
    business = Business.find(params[:business_id])
    new_comment = business.comments.create
    new_comment.comment = params[:comment_text]
    new_comment.save
    respond_to do |format|
      format.html {redirect_to business}
      format.js
    end
  end

  def destroy
    business = Business.find(params[:business])
    comment = Comment.find(params[:id])
    comment.destroy!
    params[:id] = business.id
    respond_to do |format|
      format.html {redirect_to business_url(id: params[:id])}
      format.js 
    end
  end
end

class CommentsController

注释在我的业务视图中呈现如下：

<aside class="comment-section">
    <h4 class="thin-grey-underline"><span class="glyphicon glyphicon-comment glyphicon-left-space"></span> Reviews </h4>
    <% if !@business.comments.empty? %>
      <% @business.comments.each do |comment| %>
        <div id="comments">
          <%= render partial: 'comment', locals: {comment: comment, business: @business} %>
        </div>
      <% end %>
    <% else %>
      <p> No reviews yet... </p>
    <% end %>
    <%= render partial: 'comments_form' %>
  </aside>

评论
还没有评论

我的单一评论部分：

<div class="row single-comment vertical-align">
  <div class="col-sm-12 col-md-3">
    <div class="profile-image" style="background: url('<%= business.profile_image_url(:thumb).to_s %>') no-repeat; background-position:center"></div>
  </div>
  <div class="col-sm-12 col-md-9">
    <h5><%= comment.title %></h5>
    <p><%= comment.comment %></p>
    <%= button_to(business_comment_path(@business.id,comment.id), {method: :delete, remote: true, class:"btn btn-danger delete-comment-button pull-right", params:{id: comment.id, business: business.id}} ) do%>
      <i class="glyphicon glyphicon-trash"></i>
    <% end %>
  </div>
</div>

用于创建新注释的表单不完整：

<div class="row">
  <div class="col-sm-12 col-md-12">
    <div class="comments-form">
      <%= form_tag(business_comments_path(@business), html: { id: "comment-form" }, method: 'post', remote: true) do %>
        <h5 class="thin-grey-underline"><span class="glyphicon glyphicon-pencil glyphicon-left-space"></span> Write a Review </h5>
        <%= text_area_tag(:comment_text,nil, class: "comment-form-input")%>
        <%= hidden_field_tag 'business_id', params[:id] %>
        <%= submit_tag("Comment", class:"btn btn-primary") %>
      <% end %>
    </div>
  </div>
</div>

写一篇评论

如果我有一个评论列表，如何通过单击删除链接删除特定评论，并以淡出方式将其从视图中删除

---

我有一个destroy.js.erb文件被调用，但我不知道如何获取引用以淡出特定的注释。。不确定我是否在这里清楚地解释了自己

您可以尝试以下方式：

$('body').on('ajax:success', '.delete-comment-button', function(event) {
  $(event.original_target).closest('.single-comment').fadeOut();
})

在你的评论中：

<div id="comment_<%= comment.id %>" class="row single-comment vertical-align">

destroy.js.erb：

$('#comment_<%= @comment.id %>').remove();

$（'#comment'）.remove（）；

您可以尝试以下方法：

$('body').on('ajax:success', '.delete-comment-button', function(event) {
  $(event.original_target).closest('.single-comment').fadeOut();
})

在你的评论中：

<div id="comment_<%= comment.id %>" class="row single-comment vertical-align">

destroy.js.erb：

$('#comment_<%= @comment.id %>').remove();

$（'#comment'）.remove（）；

Knockoutjs可以做到这一点

Knockoutjs可以做到这一点

第一步是确保要删除的内容具有唯一的id，并且该id易于生成。为此，我使用名为dom_id的实例方法修补了AR:：Base，如下所示：

def dom_id
  "#{self.class.name.underscore}-#{self.id}"
end

这意味着，如果我渲染出一个Foo对象列表，我可以执行以下操作

<%= render :partial => "foos/foo", :collection => @foos %>

---

第一步是确保要删除的内容具有唯一的id，并且该id易于生成。为此，我使用名为dom_id的实例方法修补了AR:：Base，如下所示：

def dom_id
  "#{self.class.name.underscore}-#{self.id}"
end

这意味着，如果我渲染出一个Foo对象列表，我可以执行以下操作

<%= render :partial => "foos/foo", :collection => @foos %>

---

您可以使用helper

dom\u id

method（）：

• 将
  更改为
  或将

  id

  属性添加到

  div.single-comment

• 在js响应中do$（'#'）.fadeOut（）

另一个选项是绑定到jQuery事件，如下所示：

$('body').on('ajax:success', '.delete-comment-button', function(event) {
  $(event.original_target).closest('.single-comment').fadeOut();
})

---

然后，您只需返回删除请求的状态2XX即可

您可以使用helper

dom\u id

方法（）：

• 将
  更改为
  或将

  id

  属性添加到

  div.single-comment

• 在js响应中do$（'#'）.fadeOut（）

另一个选项是绑定到jQuery事件，如下所示：

$('body').on('ajax:success', '.delete-comment-button', function(event) {
  $(event.original_target).closest('.single-comment').fadeOut();
})

---

然后，您只需返回删除请求的状态2XX即可

Nice！我根本没有考虑过这种方式…这可以用来删除评论，你有什么建议可以在我创建评论时将其淡入？非常感谢您没有经过测试，但是可以在您的create.js.erb中尝试类似的内容：

$（'all#u comments'）.append（''.hide（）.fadeIn（2000））一定要在注释列表周围加上一个div，否则它会附加在添加注释表单之后。很好！我根本没有考虑过这种方式…这可以用来删除评论，你有什么建议可以在我创建评论时将其淡入？非常感谢您没有经过测试，但是可以在您的create.js.erb中尝试类似的内容：
$（'all#u comments'）.append（''.hide（）.fadeIn（2000））请确保在注释列表周围加上一个div，否则它将附加在添加注释表单之后。