コクーンとJavascriptで入力値を取得するには？

Question

私は、ユーザーが新しいコマンドを作成して、2種類の製品を追加できる単純な注文管理システムを実装しようとしています。ユーザが製品を選択して数量を入力すると、総価格が動的に計算され、最後のフィールドに表示されます。注文に新しい商品ラインを追加するために、私は宝石のコクーンを使用します。

私の問題は、Cocoonで追加されたすべての新製品の合計価格を計算できないということです。私が数量を入力するたびに、私は最初の行から合計価格を取得します。この問題を解決するために私を助けることができる人はいますか？

これが私の見解/受注/ _form.html.erbです：

<%= form_for @order do |f| %> 

    <div id="item"> 
     <%= f.fields_for :line_items do |li| %> 
      <%= render partial: "line_item_fields", locals: {f: li} %> 
     <% end %> 
     <div class="link form-group"><%= link_to_add_association "Ajouter un produit", f, :line_items %></div> 
    </div> 

    <div class="actions"> 
     <%= f.submit "Commander", class: "btn btn-primary" %> 
    </div> 

<% end %> 

これが私の見解/受注/ _line_items.html.erbです：

<div class="nested-fields form-inline"> 

    <div class="form-group"> 
    <%= f.label "Type de produit : " %> 
    <% if current_user.recruiter.company.pricing_profile.name == ("JobCards single" || "TM Basic") %> 
     <%= f.select(:name, options_for_select([['Job card', 'Job card']]), {}, {class: "product_name"}) %> 
    <% else %> 
     <%= f.select(:name, options_for_select([['Job card', 'Job card'], ['Job page', 'Job page']]), {}, {class: "product_name"}) %> 
    <% end %> 
    </div> 

    <div class="form-group"> 
    <%= f.label "Quantité : " %> 
    <%= f.text_field :quantity, class: "quantity" %> 
    </div> 

    <div class="form-group"> 
    <%= f.label "Prix total : " %> 
    <%= f.text_field :price, class: "total_price" %> 
    </div> 

    <%= link_to_remove_association "Supprimer", f %> 
</div> 

これは私の資産/ JavaScriptのです/orders.js.erb：

$(document).ready(function() { 

    function getTotal(p, q) { 
     var r = 0; 

     if (q <= 4) { 
      r = 1; 
     } else if (q >= 5 && q <= 9) { 
      r = 0.85; 
     } else if (q >= 10 && q <= 24) { 
      r = 0.75 
     } else if (q >= 25 && q <= 49) { 
      r = 0.65 
     } else if (q >= 50 && q <= 99) { 
      r = 0.55 
     } else if (q >= 100 && q <= 249) { 
      r = 0.45 
     } else if (q >= 250 && q <= 500) { 
      r = 0.40 
     } 

     return q * p * r; 
    } 

    function getUnitCost(product_name) { 
     var unit_cost = 0; 

     if(product_name == "Job page") { 
      unit_cost = gon.jp_unit_cost 
     } else if (product_name == "Job card") { 
      unit_cost = gon.jc_unit_cost 
     } 

     return unit_cost; 
    } 

    $(document).on('change', '.product_name', function() { 
     var q = $(".quantity").val(''); 
     $('.total_price').val(''); 

    }); 

    $(document).on('keyup', '.quantity', function() { 
     var product_name = $(".product_name").val(); 
     var q = $(".quantity").val(); 
     var p = getUnitCost(product_name); 
     var total = getTotal(p, q); 
     $('.total_price').val(total) 
    }); 

    $("#item").on('cocoon:after-insert', function(e, insertedItem) { 
     var quantity = insertedItem.find('.quantity').attr('id'); 
     $(document).on("keyup", '#' + quantity, function() { 
     var q = $("#" + quantity).val(); 
     var product_name = $("#" + insertedItem.find('.product_name').attr('id')).val(); 
     var p = getUnitCost(product_name); 
     var total = getTotal(p, q); 
     $("#" + insertedItem.find('.total_price').attr('id')).val(total); 

    }); 
}); 

Answer 1

私が最初に気づい：getUnitCostにあなたがgonを参照してくださいが、私は、nを行いますどのようにそれが設定されているか変更されて参照してください？しかし、私はそれが固定値を指すと仮定します。

次に、cocoon:after-insertコールバックがありますが、その段階で数量は常に空であると思いますか？

しかし、あなたのchangeとkeyupイベントでは、同じミスを犯します。実際にどのフィールドが実際に変更を引き起こしたかは考慮されません。 changeのうち、product-nameをクリアすると、のすべてがになりますか？

たとえば、数量が変更された場合、その特定の数量を使用する必要があります。今度は$('.quantity').val()を実行し、最初の数量の値を返します。あなたが始めるために、このコードはテストされていませんが、例：だから注

$(document).on('keyup', '.quantity', function() { 
    var this = $(this); 
    var parent_nested_item = this.parent('.nested-fields'); 
    var product_name = parent_nested_item.find(".product_name").val(); 
    var q = this.val(); 
    var p = getUnitCost(product_name); 
    var total = getTotal(p, q); 
    parent_nested_item.find('.total_price').val(total) 
}); 

ような何かを行います。要約へ

要するに

、：イベントをトリガ要素（$(this)）を使用して、正しい「スコープ」に正しいアイテムを見つけるためにjqueryのDOMトラバーサル方法を使用します。