CODEWITHSUNDEEP
jqueryruby-on-railsajaxbuttondestroy
FranGoitia
FranGoitia

Reputation: 2003

Rails Deleting model object via AJAX

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

Answers (3)

Sarwan Kumar
Sarwan Kumar

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

pauloancheta
pauloancheta

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

roxxypoxxy
roxxypoxxy

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

Related Questions