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

enter image description here

But is not working after adding more rows

enter image description here

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

Please somebody can help me with this problem?

jupenur · Accepted Answer · 2014-06-04T15:59:38.903

5

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));
});

edited Jun 04 '14 at 15:59

answered Jun 04 '14 at 05:10

jupenur

1,005
6
8

Yes, you'll have to make some changes. What exactly, that depends on which approach you choose. If you use CSS classes, you don't have to keep adding new IDs to the script though. – jupenur Jun 04 '14 at 13:50
I've never used eRuby, so I can't help you with that part, but I added some example JavaScript code to my answer. – jupenur Jun 04 '14 at 15:02
Are you getting an error of some kind? Which version of jQuery are you using? – jupenur Jun 04 '14 at 15:26
Sounds odd. I tested the code in a jsfiddle, so it *should* work. Try adding some logging and see if you can pinpoint the problem. – jupenur Jun 04 '14 at 15:36
Yes, I understood what you're trying to achieve. The code I gave you should do exactly that, as long as the RoR logic is valid. – jupenur Jun 04 '14 at 15:44
I added some comments to my code. I hope that makes it a bit more understandable. I also noticed a typo in there and fixed it, so now it should actually work. – jupenur Jun 04 '14 at 16:00
Can you show me your erb file? Or the HTML generated by it? I'm starting to suspect there's something odd going on there. – jupenur Jun 04 '14 at 18:06
http://stackoverflow.com/questions/24043583/issue-sending-params-using-javascript – Carlos Morales Jun 04 '14 at 18:22

How can do calculations in ajax update div?

1 Answers1