Rails 通过 AJAX 删除模型对象

Question

我正在尝试使用 Ajax 远程销毁一个对象。这就是我所做的：

这是 ProductsController 中的销毁操作

  def destroy
    @product = Product.find(params[:id])
    @product.destroy
    respond_to do |format|
      format.html {redirect_to products_path, success: 'Product destroyed successfully'}
      format.js {}
    end
  end

这是 destroy.js.erb 内部产品浏览量

$(this).closest('tr').remove()

与按钮的交互在具有以下模板的页面中进行：索引模板：

<table class="table table-hover products">
  <thead>
    <tr>
      <th>Product</th>
      <th>Stock</th>
      <th>Cost</th>
      <th>Price</th>
      <th>Sell</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <%= render @products %>
  </tbody>
</table>
<br/>
<br/>

这是_产品模板

<tr>
  <td>
    <%= link_to product.title, edit_product_path(product) %>
  </td>
  <td>
    <%= product.stock %>
  </td>
  <td>
    <%= product.cost %>
  </td>
  <td>
    <%= product.price %>
  </td>
  <td>
    <%= button_to 'Sell Product', new_product_sale_path(product), method: :get, class: 'btn btn-secondary' %>
  </td>
  <td>
    <%= button_to "Delete Product", product_path(product), remote: true, 
                                method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-secondary" %>
  </td>
</tr>

销毁有效，但 html 未相应更新。我错过了什么？谢谢

Answer 1

this 在 delete.js.erb 中是没有意义的。您将不得不以某种方式唯一地标记每一行，例如通过 id。

您的 _product 模板将如下所示：

<tr id="row_<%= product_id %>">
    <td>
      <%= link_to product.title, edit_product_path(product) %>
    </td>
    <td>
      <%= product.stock %>
    </td>
    <td>
      <%= product.cost %>
    </td>
    <td>
      <%= product.price %>
    </td>
    <td>
      <%= button_to 'Sell Product', new_product_sale_path(product), method: :get, class: 'btn btn-secondary' %>
    </td>
    <td>
      <%= button_to "Delete Product", product_path(product), remote: true, 
                                  method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-secondary" %>
    </td>
</tr>

你的 destroy.js.erb 应该看起来像

$("#row_<%= @product.id %>").remove();

希望你明白我的意思。

Answer 2

最好使用 DOMid 来定位您要删除的元素。例如：<tr id='<%= dom_id(product)%>'> 并且在您的 destroy.js.erb $('#<%= dom_id(@product) %>').remove()

Answer 3

实际上，this是对象的引用，所以在destroy.js.erb中是不可用的。您可以为产品部分中的每个 tr 提供唯一的 id。

例如：

<tr id="product_<%= product.id %>" >
  <td>
    <%= link_to product.title, edit_product_path(product) %>
  </td>
  <td>
    <%= product.stock %>
  </td>
  <td>
    <%= product.cost %>
  </td>
  <td>
    <%= product.price %>
  </td>
  <td>
    <%= button_to 'Sell Product', new_product_sale_path(product), method: :get, class: 'btn btn-secondary' %>
  </td>
  <td>
    <%= button_to "Delete Product", product_path(product), remote: true, 
                                method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-secondary" %>
  </td>
</tr>

并且，在destroy.js.erb中，编写如下代码。一定能帮到你。

$("#product_<%=@product.id%>").remove();

Rails 通过 AJAX 删除模型对象

Rails Deleting model object via AJAX

ajax

jquery

ruby-on-rails

button

destroy