누에 고치 및 자바 스크립트로 입력 값을 얻는 방법은 무엇입니까?

Question

사용자가 새로운 명령을 작성하고 두 가지 유형의 제품을 추가 할 수있는 간단한 주문 관리 시스템을 구현하려고합니다. 사용자가 제품을 선택하고 수량을 입력하면 총 가격이 동적으로 계산되어 마지막 필드에 표시됩니다. 주문에 새 제품 라인을 추가하기 위해 나는 보석 고치 (Gem Cocoon)를 사용합니다.

내 문제는 Cocoon으로 추가 한 모든 신제품의 총 가격을 계산할 수 없다는 것입니다. 수량을 입력 할 때마다 첫 번째 줄에서 총 가격을받습니다. 이 문제를 해결하도록 도와 줄 수있는 사람이 있습니까? 이것은 내보기/주문/_line_items.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 %> 

:

이

내보기/주문/_form.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> 

이 내 자산/자바 스크립트입니다 /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를 참조하지만 해당 할 그것이 어떻게 설정되거나 변경되는지 보지 않겠습니까? 그러나 나는 그것이 고정 된 가치를 지칭한다고 생각한다.

그렇다면 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 탐색 방법을 사용 요소를 사용합니다.