如何在ajax更新div中进行计算？(How can do calculations in ajax update div?)

如何在ajax更新div中进行计算？(How can do calculations in ajax update div?)

我使用javascript进行了一个应用程序，将数量与价格相乘，但仅适用于第一行。

这是控制器：

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

这是索引视图:(显示所有产品和将更新的div）

<% @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>

以下是将替换div的ajax更新：“selected_product.rjs”

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

以下是部分视图add_product.erb，显示所选信息

<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 %>

只在第一行工作正常

但是在添加更多行后无法正常工作

似乎javascript只与第一行一起使用。

请有人帮我解决这个问题吗？

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?

最满意答案

这里的问题是您使用ID访问字段。 每个产品行上的 ID都相同 。 对于有效的HTML，每个元素的ID必须是唯一的，这就是你的jQuery选择器只占用第一行的原因。

要解决此问题，请为每行生成唯一ID，或使用ID以外的其他ID。 例如，类。

以下是用于类的更改处理程序的修改版本：

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

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