Rails nested_form gem和jquery的計算

Question

使用Ryan Bates出色的Nested_form gem時我遇到了很大的問題。實際上，它在我看來是一種魅力，它是一種嵌套動態添加和刪除字段的功能。

問題是我需要執行一些計算，當用戶在像onchange事件的字段中輸入值時。問題是，nested_form gem給所有新添加的行賦予相同的id，然後不可能選擇它來執行一些任務......我必須承認我根本不是jquery的專家......

有沒有人可以幫我解決這個問題。

這裏是主視圖的代碼：

<%= nested_form_for @pinvoice do |f| %> 
<% if @pinvoice.errors.any? %> 
<div id="error_explanation"> 
<h2><%= pluralize(@pinvoice.errors.count, "error") %> prohibited this pinvoice from being saved:</h2> 
<ul> 
<% @pinvoice.errors.full_messages.each do |msg| %> 
<li><%= msg %></li> 
<% end %> 
</ul> 
</div> 
<% end %> 
<p> 
<%= f.label :contact %> 
<%= f.text_field :contact %> 
<%= f.label :date_facture %> 
<%= f.date_select :date_facture %> 
<%= f.label :montant_total %> 
<%= f.text_field :montant_total %> 
<br /> 
<br /> 
</p> 
<%= f.fields_for :pinvlines %> 
<p><%= f.link_to_add "add one", :pinvlines%> 
<p> 
<div class="actions"> 
<%= f.submit %> 
</div> 
</p> 
<% end %> 

和的代碼的「嵌套部分：

<%= javascript_include_tag 'javascript_pinvlines_fields_new' %> 
<div class="fields"> 
<%= f.label :description %> 
<%= f.text_field :description %> 
<%= f.label :compte_id %> 
<%= f.collection_select(:compte_id, @compte, :id, :nom, {:prompt => "Type de charge"}) %> 
<%= f.label :quantite %> 
<%= f.text_field :quantite, :size => 10 %> 
<%= f.label :prix_unitaire %> 
<%= f.text_field :prix_unitaire, :size => 10 %> 
<%= f.label :montant_HTVA %> 
<%= f.text_field :montant_HTVA, :size => 10 %> 
<%= f.link_to_remove "remove"%> 
</p> 
</div> 

會是什麼代碼來自動計算稱爲字段‘montant_HTVA’這是「quantite」乘以「prix_unitaire」使用jquery並與所有新增加的行一起工作太...

非常感謝您的幫助

下面是HTML代碼與2號線在默認情況下到來的票面枝條視圖+ 2添加的行：

<label for="pinvoice_pinvlines_attributes_0_quantite">Quantite</label> 
<input name="pinvoice[pinvlines_attributes][0][quantite]" onchange="calculateMontant();" size="10" type="text" /> 
<label for="pinvoice_pinvlines_attributes_0_prix_unitaire">Prix unitaire</label> 
<input id="pinvoice_pinvlines_attributes_0_prix_unitaire" name="pinvoice[pinvlines_attributes][0][prix_unitaire]" size="10" type="text" /> 
<label for="pinvoice_pinvlines_attributes_0_montant_HTVA">Montant htva</label> 
<input id="montant_HTVA1" name="pinvoice[pinvlines_attributes][0][montant_HTVA]" size="10" type="text" /> 
<input id="pinvoice_pinvlines_attributes_0__destroy" name="pinvoice[pinvlines_attributes][0][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields">remove</a> 
</p> 
</div></div><div class="fields"><script src="/javascripts/javascript_pinvlines_fields_new.js" type="text/javascript"></script> 
<div class="fields"> 
<label for="pinvoice_pinvlines_attributes_1_description">Description</label> 
<input id="pinvoice_pinvlines_attributes_1_description" name="pinvoice[pinvlines_attributes][1][description]" size="30" type="text" /> 
<label for="pinvoice_pinvlines_attributes_1_compte_id">Compte</label> 
<select id="pinvoice_pinvlines_attributes_1_compte_id" name="pinvoice[pinvlines_attributes][1][compte_id]"> <option value="">Type de charge</option> 
<option value="1">Caisse</option> 
<option value="2">UBS</option> 
<option value="3">Ventes</option> 
<option value="4">Marketing</option> 
<option value="7">Capital</option> 
<option value="8">TVA sur ventes</option> 
<option value="9">TVA sur achats</option></select> 
<label for="pinvoice_pinvlines_attributes_1_quantite">Quantite</label> 
<input name="pinvoice[pinvlines_attributes][1][quantite]" onchange="calculateMontant();" size="10" type="text" /> 
<label for="pinvoice_pinvlines_attributes_1_prix_unitaire">Prix unitaire</label> 
<input id="pinvoice_pinvlines_attributes_1_prix_unitaire" name="pinvoice[pinvlines_attributes][1][prix_unitaire]" size="10" type="text" /> 
<label for="pinvoice_pinvlines_attributes_1_montant_HTVA">Montant htva</label> 
<input id="montant_HTVA2" name="pinvoice[pinvlines_attributes][1][montant_HTVA]" size="10" type="text" />  <input id="pinvoice_pinvlines_attributes_1__destroy" name="pinvoice[pinvlines_attributes][1][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields">remove</a> 
</p> 
</div></div> 
<p><a href="javascript:void(0)" class="add_nested_fields" data-association="pinvlines">add one</a> 
<p> 
<div class="actions"> 
<input id="pinvoice_submit" name="commit" type="submit" value="Create Pinvoice" /> 
</div> 
</p> 
</form><div id="pinvlines_fields_blueprint" style="display: none"><div class="fields"><script src="/javascripts/javascript_pinvlines_fields_new.js" type="text/javascript"></script> 
<div class="fields"> 
<label for="pinvoice_pinvlines_attributes_new_pinvlines_description">Description</label> 
<input id="pinvoice_pinvlines_attributes_new_pinvlines_description" name="pinvoice[pinvlines_attributes] [new_pinvlines][description]" size="30" type="text" /> 
<label for="pinvoice_pinvlines_attributes_new_pinvlines_compte_id">Compte</label> 
<select id="pinvoice_pinvlines_attributes_new_pinvlines_compte_id" name="pinvoice[pinvlines_attributes] [new_pinvlines][compte_id]"><option value="">Type de charge</option> 
<option value="1">Caisse</option> 
<option value="2">UBS</option> 
<option value="3">Ventes</option> 
<option value="4">Marketing</option> 
<option value="6">Loyer</option> 
<option value="7">Capital</option> 
<option value="8">TVA sur ventes</option> 
<option value="9">TVA sur achats</option></select> 
<label for="pinvoice_pinvlines_attributes_new_pinvlines_quantite">Quantite</label> 
<input name="pinvoice[pinvlines_attributes][new_pinvlines][quantite]" onchange="calculateMontant();" size="10" type="text" /> 
<label for="pinvoice_pinvlines_attributes_new_pinvlines_prix_unitaire">Prix unitaire</label> 
<input id="pinvoice_pinvlines_attributes_new_pinvlines_prix_unitaire" name="pinvoice[pinvlines_attributes][new_pinvlines][prix_unitaire]" size="10" type="text" /> 
<label for="pinvoice_pinvlines_attributes_new_pinvlines_montant_HTVA">Montant htva</label> 
<input id="montant_HTVA3" name="pinvoice[pinvlines_attributes][new_pinvlines][montant_HTVA]" size="10" type="text" /> 
<input id="pinvoice_pinvlines_attributes_new_pinvlines__destroy" name="pinvoice[pinvlines_attributes][new_pinvlines][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields">remove</a> 
</p> 
</div></div></div> 
<a href="/pinvoices">Back</a> 
</body> 
</html> 

Answer 1

我已經改變了執行我的計算直接在Rails的水平integreting的方式。