Reputation: 2003
I'm trying to remotely destroy an object using Ajax. This is what I've done:
This is the destroy action in 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 is the destroy.js.erb inside products views
$(this).closest('tr').remove()
The interaction with the button is in a page with the following templates: Index template:
<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/>
This is _product template
<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>
The destroy works, but the html is not updated accordingly. What am I missing ? Thanks
Upvotes: 2
Views: 2169
Reputation: 1311
Actually, this
is a reference of object, so it won't be available, in destroy.js.erb.
You may give unique id
to each tr in product partial.
eg:
<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>
And, in destroy.js.erb, write following code. It will definite help you.
$("#product_<%=@product.id%>").remove();
Upvotes: 1
Reputation: 369
It is a good practice using DOMid to locate which element you are trying to delete. for example: <tr id='<%= dom_id(product)%>'>
and in your destroy.js.erb $('#<%= dom_id(@product) %>').remove()
Upvotes: 1
Reputation: 3121
this
in delete.js.erb makes no sense. You will have to somehow mark each row uniquely, by id for example.
Your _product template gonna look like:
<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>
And your destroy.js.erb should look like
$("#row_<%= @product.id %>").remove();
I hope you get the point.
Upvotes: 4