delete and update a object of associated model using ajax and rails

Question

I have two models. lets say defects and products .

product has_many :defects

defect belongs_to :product

1) I am listing all the associated defects of a product in the show page

I want to include an edit and delete action for the defects in the product show page. By default the delete action is deleting the product as the destroy function is called on the product ( @product.destroy ) in the controller.How to delete a selected defect?

2) For creating the defects i have included the below js script ( create.js.erb ) in the defects controller

   var html = "<p> <%= @product.defect.try(:defect_description) </p>"
$('#added').append(html);

This wouldn't work as the association between the two is has many.How to append the defect that was entered ? I am using the form in the product show page

This is the product show page code where i am listing the defects and adding

<button class="mybtn">Defects </button>
          </div>
          <div id="clicked">
            <% if @product.defects.present? %>
          <% @product.defects.each do |defect|%>
          <p> <%= defect.try(:defect_description) %>  <%= link_to 'Delete', defect, method: :delete, data: { confirm: "Are you sure you want to delete ?"},class: "btn btn-danger btn-xs" %></td></p> 
          <% end %>
          <%= link_to "Add Defects",new_product_defect_path(@product.id),class:'btn btn-sm btn-success',remote:true%>
          <% else %>
             <p id="new_defect"> No defects found for this product </p>
              <%= link_to "Add Defects",new_product_defect_path(@product.id),class:'btn btn-sm btn-success',remote:true%>
           <%end%>
           </div>

Answer 1

To list all the defects for the product with edit/delete actions, in the product show page, you'd have something like:

<% @product.defects.each do |defect| %>
  <%= defect.description %>
  <%= button_to 'Edit', edit_product_defect_path(@product, defect)
  <%= button_to 'Delete', product_defect_path(@product, defect), method: :delete
<% end %>

As regards the defect that has been created, you should have access to that defect so you can amend your append statement accordingly.

var html = "<p> <%= @defect.defect_description </p>";
html += "<%= button_to 'Edit', edit_product_defect_path(@product, defect)";
$('#added').append(html);

Answer 2

products/show.html.erb

<div id="clicked">
   <%= render 'product_defects' %>
</div>

products/_product_defects.html.erb

<% if @product.defects.present? %>
    <% @product.defects.each do |defect|%>
      <p>
         <%= defect.try(:defect_description) %>
         <%= link_to 'Delete', defect, method: :delete, data: { confirm: "Are you sure you want to delete ?"},class: "btn btn-danger btn-xs" %></td>
      </p> 
    <% end %>

    <%= link_to "Add Defects",new_product_defect_path(@product.id),class:'btn btn-sm btn-success',remote:true%>
<% else %>
      <p id="new_defect"> No defects found for this product </p>
      <%= link_to "Add Defects",new_product_defect_path(@product.id),class:'btn btn-sm btn-success',remote:true%>
<% end %>

When you hit Add Defects button, an ajax request will be sent to your DefectsController's create action . You need to get the product for which the defect is to be added and render the _product_defects.html.erb as follows:

defects/create.js.erb

$("#clicked").html("<%= render 'products/product_defects' %>");