jquery - RailsのNested-FormでjQueryを使用して注文の合計金額を計算する

Question

請求書を作成するためのフォームがあります。その法案のさまざまな記事は、レール用のnested_form gemで追加できます。

ここで、記事または記事の数を変更するたびに「合計金額」の値を更新したいと考えています。

私の問題は次のとおりです。ネストされたフォームのさまざまな属性にアクセスするにはどうすればよいですか?

誰かが私を助けてくれることを願っています。

私の _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 %>

および部分 _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>

score 2 · Accepted Answer

あなたが言及したような問題に遭遇するので、ビューでこれを行わないことを強くお勧めします（価格などのフォーマットされた出力から値を解析する必要があります）。

これは、表示に使用されるモデルからより多くの値を導き出そうとしているため、ビューモデルが役立つ場合があります。ヘルパーメソッドで十分かもしれませんが、ロジックの複雑さによっては、それをテストする必要があり、Railsに結合されていないクラスをテストするのは簡単です。

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

お役に立てれば。

jquery - RailsのNested-FormでjQueryを使用して注文の合計金額を計算する

1 に答える 1

Related

Reference