計算嵌套表格與jQuery訂單的總價值在Rails的

我有一個窗體創建的法案。該法案的不同文章可以添加與軌道nested_form gem。計算嵌套表格與jQuery訂單的總價值在Rails的

現在我想更新「總額」值，每次我改文章或文章的數量。

我的問題是：我如何可以訪問不同屬性的嵌套形式？

希望有人能幫助我。

我_forms.html.erb：

<%= nested_form_for @bill do |f| %> 
    <div id="myModal" class="modal"> 
     <div class="modal-header"> 
     <%= link_to 'x', bills_path, :class => "close", "data-dismiss" => "modal" %> 
     <% if @current_method == "edit" %> 
      <h3>Rechnung bearbeiten</h3> 
     <% else %> 
      <h3>Rechnung anlegen</h3> 
     <% end %> 
     </div> 
     <div class="modal-body"> 
    <% if @bill.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@bill.errors.count, "Fehler") %> trat beim Speichern auf:</h2> 

     <ul> 
     <% @bill.errors.full_messages.each do |msg| %> 
     <li><%= msg %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 

<div class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label">Rechnungsdatum</label> 
    <div class="controls"><%= f.date_select :date %></div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Kunde</label> 
    <div class="controls"><%= f.collection_select :customer_id, Customer.all, :id, :name_company_id %></div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Artikel</label> 
    <div class="controls"> 
     <%=f.fields_for :bill_items do |builder| %> 
     <%= render 'bill_item_fields', :f => builder %> 
     <% end %> 
     <%= f.link_to_add "Artikel hinzufügen", :bill_items, :class => "btn btn-success", :style => "color:#fff" %><br> 
     <small>(1 Einheit entspricht 30 min)</small> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Rabatt</label> 
    <div class="controls"><%= f.text_field number_with_precision(:discount, :precision => 2), :class => "input-mini", :style => "color:red", :placeholder => "0.00" %> &euro;</div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label"><div style="font-weight:bold;">Gesamtpreis</div></label> 
    <div class="controls"><div style="font-weight: bold;"><%= number_with_precision(@bill.total, :precision => 2) %> &euro;</div></div> 
    </div> 
    <hr> 
    <% if @current_method == "edit" %> 
    <div class="control-group"> 
    <label class="control-label">Bezahlt</label> 
    <div class="controls"> 
     <%= f.check_box :state, :id=>"ch_location" %></div> 
    </div> 
     <% end %> 
    <div class="control-group"> 
    <label class="control-label">Kategorie</label> 
    <div class="controls"><%= f.select :category, %w{CMD Lindau}, :class => "input-mini" %></div> 
    </div> 
    </div> 
     </div> 

    <div class="modal-footer"> 
     <%= link_to 'Schliessen', bills_path, :class => "btn", "data-dismiss" => "modal" %> 
     <%= f.submit 'Speichern', :class => "btn btn-primary", :style => "color:#fff", :disable_with => "Speichere..." %> 
    </div> 
    </div> 
</div> 
<% end %>

和particl _bill_items_field.html.erb：

<%= f.text_field :count, :class => "input-mini calc", :placeholder => "Anzahl", :id => "item_quantity" %> 
<%= f.collection_select :article_id, Article.all, :id, :name_and_price, :id => "item_price" %> 
Löschen? <%= f.check_box :_destroy %> 
<br><br>

編輯：我覺得現場「：name_and_price」必須與解析一個正則表達式？目前，它看起來像「NAME（X.XX€）」

編輯：HTML代碼：

<body> 

<!-- Navigation 
    ================================================== --> 
<form accept-charset="UTF-8" action="/bills/43" class="edit_bill" id="edit_bill_43" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Ft2ry9QwRVEITjDRxt8b99OfVKHbaoiLkyotblgeJ9g=" /></div> 
    <div id="myModal" class="modal"> 
     <div class="modal-header"> 
     <a href="/bills" class="close" data-dismiss="modal">x</a> 
      <h3>Rechnung bearbeiten</h3> 
     </div> 
     <div class="modal-body"> 

<div class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label">Rechnungsdatum</label> 
    <div class="controls"><select id="bill_date_1i" name="bill[date(1i)]"> 
<option value="2008">2008</option> 
<option value="2009">2009</option> 
<option value="2010">2010</option> 
<option value="2011">2011</option> 
<option value="2012">2012</option> 
<option selected="selected" value="2013">2013</option> 
<option value="2014">2014</option> 
<option value="2015">2015</option> 
<option value="2016">2016</option> 
<option value="2017">2017</option> 
<option value="2018">2018</option> 
</select> 
<select id="bill_date_2i" name="bill[date(2i)]"> 
<option value="1">January</option> 
<option selected="selected" value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option> 
</select> 
<select id="bill_date_3i" name="bill[date(3i)]"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option selected="selected" value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 
</div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Kunde</label> 
    <div class="controls"><select id="bill_customer_id" name="bill[customer_id]"><option value="1" selected="selected">#Schnell Adrian - CMD (ID 1)</option> 
<option value="6">#Hans Gustav - Test2 (ID 6)</option></select></div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Artikel</label> 
    <div class="controls"> 
     <div class="fields"> 
     <input class="input-mini calc" id="item_quantity" name="bill[bill_items_attributes][0][count]" placeholder="Anzahl" size="30" type="text" value="22" /> 
<select id="bill_bill_items_attributes_0_article_id" name="bill[bill_items_attributes][0][article_id]"><option value="1">iOS (35.0 &euro;)</option> 
<option value="2">Webdesign (25.0 &euro;)</option> 
<option value="3">Beratung (50.0 &euro;)</option> 
<option value="6" selected="selected">Anfahrt (0.8 &euro;)</option></select> 
Löschen? <input name="bill[bill_items_attributes][0][_destroy]" type="hidden" value="0" /><input id="bill_bill_items_attributes_0__destroy" name="bill[bill_items_attributes][0][_destroy]" type="checkbox" value="1" /> 
<br><br> 
<input id="bill_bill_items_attributes_0_id" name="bill[bill_items_attributes][0][id]" type="hidden" value="54" /></div><div class="fields"> 
     <input class="input-mini calc" id="item_quantity" name="bill[bill_items_attributes][1][count]" placeholder="Anzahl" size="30" type="text" value="2" /> 
<select id="bill_bill_items_attributes_1_article_id" name="bill[bill_items_attributes][1][article_id]"><option value="1" selected="selected">iOS (35.0 &euro;)</option> 
<option value="2">Webdesign (25.0 &euro;)</option> 
<option value="3">Beratung (50.0 &euro;)</option> 
<option value="6">Anfahrt (0.8 &euro;)</option></select> 
Löschen? <input name="bill[bill_items_attributes][1][_destroy]" type="hidden" value="0" /><input id="bill_bill_items_attributes_1__destroy" name="bill[bill_items_attributes][1][_destroy]" type="checkbox" value="1" /> 
<br><br> 
<input id="bill_bill_items_attributes_1_id" name="bill[bill_items_attributes][1][id]" type="hidden" value="56" /></div>  <a href="javascript:void(0)" class="btn btn-success add_nested_fields" data-association="bill_items" data-blueprint-id="bill_items_fields_blueprint" style="color:#fff">Artikel hinzufügen</a><br> 
     <small>(1 Einheit entspricht 30 min)</small> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Rabatt</label> 
    <div class="controls"><input class="input-mini" id="bill_discount" name="bill[discount]" placeholder="0.00" size="30" style="color:red" type="text" value="15" /> &euro;</div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label"><div style="font-weight:bold;">Gesamtpreis</div></label> 
    <div class="controls"><div style="font-weight: bold;">72.60 &euro;</div></div> 
    </div> 
    <hr> 
    <div class="control-group"> 
    <label class="control-label">Bezahlt</label> 
    <div class="controls"> 
     <input name="bill[state]" type="hidden" value="0" /><input checked="checked" id="ch_location" name="bill[state]" type="checkbox" value="1" /></div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Kategorie</label> 
    <div class="controls"><select id="bill_category" name="bill[category]"><option value="CMD" selected="selected">CMD</option> 
<option value="Lindau">Lindau</option></select></div> 
    </div> 
    </div> 
     </div> 

    <div class="modal-footer"> 
     <a href="/bills" class="btn" data-dismiss="modal">Schliessen</a> 
     <input class="btn btn-primary" data-disable-with="Speichere..." name="commit" style="color:#fff" type="submit" value="Speichern" /> 
    </div> 
    </div> 
</div> 
</form><div data-blueprint="&lt;div class=&quot;fields&quot;&gt; 
     &lt;input class=&quot;input-mini calc&quot; id=&quot;item_quantity&quot; name=&quot;bill[bill_items_attributes][new_bill_items][count]&quot; placeholder=&quot;Anzahl&quot; size=&quot;30&quot; type=&quot;text&quot; /&gt; 
&lt;select id=&quot;bill_bill_items_attributes_new_bill_items_article_id&quot; name=&quot;bill[bill_items_attributes][new_bill_items][article_id]&quot;&gt;&lt;option value=&quot;1&quot;&gt;iOS (35.0 &amp;euro;)&lt;/option&gt; 
&lt;option value=&quot;2&quot;&gt;Webdesign (25.0 &amp;euro;)&lt;/option&gt; 
&lt;option value=&quot;3&quot;&gt;Beratung (50.0 &amp;euro;)&lt;/option&gt; 
&lt;option value=&quot;6&quot;&gt;Anfahrt (0.8 &amp;euro;)&lt;/option&gt;&lt;/select&gt; 
Löschen? &lt;input name=&quot;bill[bill_items_attributes][new_bill_items][_destroy]&quot; type=&quot;hidden&quot; value=&quot;0&quot; /&gt;&lt;input id=&quot;bill_bill_items_attributes_new_bill_items__destroy&quot; name=&quot;bill[bill_items_attributes][new_bill_items][_destroy]&quot; type=&quot;checkbox&quot; value=&quot;1&quot; /&gt; 
&lt;br&gt;&lt;br&gt; 
&lt;/div&gt;" id="bill_items_fields_blueprint" style="display: none"></div> 

</body>

來源

2013-03-03 Adrian

更新在哪裏？服務器或客戶端？如果客戶;發佈源html而不是服務器代碼...我們不是服務器解析器 – charlietfl 2013-03-03 14:14:27

我想過在客戶端計算。但說實話：這對我來說並不重要，這是如何以及在哪裏計算的。對不起的代碼抱歉 - 現在我粘貼了我的HTML源代碼。 – Adrian 2013-03-03 14:28:44

我強烈建議你不要做這在視圖中，你會遇到像你提到的問題（需要解析格式化輸出中的值，例如價格）。

這是一個視圖模型可能是有益的，因爲你想獲得更多價值了用於顯示您的機型。輔助方法可能就足夠了，但取決於邏輯的複雜程度，您需要測試它，並且很容易測試不與Rails耦合的類。

看看在draper gem爲Rails的視圖模型的實現。

這並沒有真正解決您瞭解如何將它與jQuery的整合，而是根據你的需要，你可以使用AJAX動態情況發生變化更新這種形式的問題。您也可以考慮將您感興趣的原始值作爲表單元素上的數據屬性進行渲染，這樣您就不必擔心要刪除格式。

編輯 - 下面是一個表單元素嵌入原始值，所以它很容易被jQuery的

Rails中

解析道：

<%= f.text_field :foo, :data => {:price => "12.99"} %>

呈現的HTML看起來像這樣：

<input type="text" name="bill[foo]" id="bill_foo" data-price="12.99" />

用jQuery解析：

var price = $("#bill_foo").data("price");

希望這有助於。

來源

2013-03-03 14:20:16

可否請給我一個解決方案的例子？我對web開發很陌生，不知道如何處理。 – Adrian 2013-03-03 14:38:16

該解決方案的問題是，它不適用於下拉菜單。我只能計算我加載網站時的文章價格。接下來的問題是：如何獲得該網頁的所有「bill_foo」？ Nested_Form給他們一個像bill_bill_items_attributes_0_count，bill_bill_items_attributes_1_count這樣的名字，.. – Adrian 2013-03-03 15:13:42

如果你給他們一個css類，那麼你可以用jQuery來獲取他們所有的人，並循環他們來合併他們的值。 – 2013-03-03 15:36:59

計算嵌套表格與jQuery訂單的總價值在Rails的

回答

相關問題