How can do calculations in ajax update div?

Question

I did an application using javascript to multiply a quantity with price but is only working with the first row.

Here is the controller:

def index
   @products= CustomerProduct.all
end 

def selected_product
   @selected_product = CustomerProduct.find(params[:id])
end

Here is the index view: (Is showing all products and the div that will update)

<% @products.each do |product| %>
 <p> 
    <%= product.product_name %>
    <%= link_to_remote image_tag("image.png"),:url=>{:controller=>"customer_product",:action=>"selected_product",:id=>product.id } %>
 </p>
<% end %>

<div id="list_products">
   ## Here is the div that will update after select a product.
</div> 

Here is the ajax update that will replace the div: "selected_product.rjs"

 page.insert_html(:bottom,"list_products", :partial=>"customer_product/partials/add_product")

Here is the partial view add_product.erb, showing the information selected

<script type="text/javascript">
jQuery("#quantity").live("change", function(){
    quantity = parseFloat(jQuery(this).val() );
    importe = parseInt(jQuery("#importe").val());

    total2 = quantity*importe;   
    jQuery("#total2").val(total2.toFixed(2));
    jQuery("#total2").autoNumericSet(total2.toFixed(2));

  });
jQuery('input#total2').autoNumeric();
</script>

<% @products.each do |product| %>
 <p>
    <%= text_field_tag 'code',@selected_product.product_code,:maxlength=>"10",:size=>"10" if @selected_product %>
    <%= text_field_tag 'name',@selected_product.product_name,:size=>"40" if @selected_product %></td>
    <%= text_field_tag 'quantity',@net_insurance.to_i ,:value=>"1" ,:maxlength=>"9",:size=>"8" if @selected_product%>
    <%= text_field_tag 'importe',@selected_product.product_price ,:readonly=>true,:size=>"10" if @selected_product %>
    <%= text_field_tag 'total2',@total2.to_i,:maxlength=>"12",:size=>"12" if @selected_product %>
 </p>
<% end %>

Is working fine only with the first row

But is not working after adding more rows

Seems that the javascript is only working with the first row.

Please somebody can help me with this problem?

Answer 1

The problem here is that you are accessing the fields using IDs. IDs that are the same on every product row. For valid HTML, the ID of every element must be unique, and that's the reason your jQuery selectors are only picking up the first row.

To solve the issue, either generate unique IDs for each row, or use something other than IDs. Classes, for example.

Here's a modified version of your change handler for use with classes:

jQuery(".quantity").live("change", function() {

    // find the parent <p> element of the quantity field
    var row = jQuery(this).parent();

    // retrieve the values from the fields in row
    quantity = parseFloat(jQuery(this).val());
    importe = parseInt(row.find(".importe").val());

    // do the calculation
    total2 = quantity * importe;

    // set the value to to the total2 field in row
    row.find(".total2").val(total2.toFixed(2));
    row.find(".total2").autoNumericSet(total2.toFixed(2));
});