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 

這裏面產品的意見

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

與按鈕的交互是destroy.js.erb在具有以下模板的頁面中： 索引模板：

<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 in 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();