javascript_include_tag not working properly inside a partial in Ruby on Rails

Question

i am using simple_nested_form and i hav this in my customer bill form

<%= simple_nested_form_for @customer_bill do |f| %>
 <%= f.error_messages %>

 <%= f.label :employee_id %>
    <%= f.collection_select :employee_id, Employee.all,:id,:name, {:prompt => "Select Employee"}, :style => 'width:205px;' %><br />

            <%= f.label :date %>
            <%= f.datepicker :date, :dateFormat => 'dd MM, yy',  :showOn => "both", :buttonImage => "../assets/calendar.gif", :buttonImageOnly => true, :changeMonth => true, :changeYear => true, :placeholder => "Click on the Calender" %><br/>          

 <p><%= f.link_to_add "Add Product", :customer_bill_line_items %> </p>
  <p><%= f.submit %></p>
<% end %>

After i click the "add product" the following partial is been rendered

 <%= javascript_include_tag 'calculations' %>
     <hr/> 
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <%= f.hidden_field :customer_bill_id %>

    <%= f.label :product_id %>
    <%= f.collection_select :product_id,Product.all,:id,:title, :prompt => "Select a Product", :style => 'width:150px;' %>&nbsp;&nbsp;&nbsp;<%= f.link_to_remove "Remove Product"%>
    <br/>

     <p class="fields">
<%= f.input :price, :class =>"price" %>
<br/>
<%= f.input :quantity, :class =>"qty" %><br/>

<%= f.input :amount, :class =>"amount"%><br/>
</p>

And i have this in my Calculations.js

jQuery(document).ready(function(){
jQuery(".price, .qty").keyup(function() {
        var p = jQuery(".price").val();
        var q = jQuery(".qty").val();
        jQuery(".amount").val(q * p);
    });
});

​

Now the Problem is First time wen i click "Add products" and i Enter 'price' and 'quantity' the amount is calculated inside the js file and is displayed in the 'amount' field and wen i click add product for second time, the calculations of the first is been rendered, it seems the js file is displaying the value calculated first time in every 'amount' field

What seems to be the problem? What can i do to make proper Calculations happen everytime i call the partial? need help urgently. Thanks in advance

Answer 1

Once your "add product" partial is rendered the second time, you have some elements on the page with duplicate id values (price, qty, amount). This is invalid HTML, and jQuery won't be able to tell which ones you mean to bind keyup to.

Try rewriting your partial and jQuery to avoid this problem. Either generate properly unique ids, or hook your keyup onto a different property (perhaps a class?). If you go for the latter route, you could also consider putting the jQuery into the page as a live call, rather than adding new keyup bindings for each new product.