fields를 Cocoon 및 Jquery로 업데이트하십시오.

Question

Jquery를 사용하여 Cocoon gem으로 fields_for 필드의 값을 설정하고 싶습니다. jquery에 change 이벤트를 사용하고 있습니다.

_form

<%= form_for(@invoice) do |f| %> 

    <div class="field"> 
    <%= f.label :total_order %><br> 
    <%= f.number_field :total_order %> 
    <%= f.object_id %> 
    </div> 
    <div id="items"> 
    <%= f.fields_for :items do |i| %> 
     <%= render 'item_fields', :f => i %> 
    <% end %> 
    <div class="links"> 
     <%= link_to_add_association '+ produk', f, :items %> 
    </div> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 

_item_fields

<div class="nested-fields"> 
<tr> 
    <td><%= f.select :product_id, 
         Product.all.collect {|p| [p.name, p.id, 
         {'data-unit_cost'=>p.unit_cost}]}, 
         { include_blank: true }, 
         { class: "product-select"} %> 
    </td> 
    <td><%= f.number_field :unit_cost, 
        label: false, 
       class: "cost-input" %> 
    </td> 
    <td><%= f.number_field :quantity, 
        label: false, 
        class: "qty-input" %> 
    </td> 
    <td style="vertical-align: top;"><%= link_to_remove_association '- remove', f %></td> 
</tr> 
</div> 

커피 스크립트

$("#items").on "cocoon:after-insert", -> 
    $(".product-select").change -> 
     $(".cost-input").val($(".product-select :selected").data("unit_cost")) 

것은이있다 그것은 단지 첫 번째 중첩 기록 작동합니다. 이것은 fields_for에 의한 동적 ID 생성과 관련이있을 수 있지만이를 처리하는 방법을 알지 못합니다.

도움을 주시면 감사하겠습니다.

---

스크립트가 변경되었으며 이는 내 질문에 대한 답변입니다.

$("#items").on "change", ".product-select", -> 
    product_select = $(this) 
    product_select.parent().find('.cost-input').val(product_select.find(':selected').data('unit_cost')) 

나를 도와 준 nathanvda에게 감사드립니다.

Answer 1

요소 ID를 사용합니다. 그것은 HTML 페이지에서 유일하다고 여겨집니다. 대신 클래스를 사용해야합니다.

[업데이트] 확인. 전역 선택기를 사용하므로 클래스가있는 모든 요소를 ​​변경할 수 있습니다.

실제로 원하는 것은 내가 삽입 한 요소를 변경하는 것입니다. 설명서에 표시된 것처럼 가능합니다. 그냥이 코드는 테스트되지 않은 상태입니다

$("#items").on "cocoon:after-insert", (e, added_item) -> 
    added_item.find(".product-select").change -> 
    $(this).parent().find(".cost-input").val($(this).selected.data("unit_cost")) 

쓰기,하지만 난 할 일 : change 이벤트를 연결합니다. 변경 이벤트에서 이벤트를 트리거하는 컨테이너를 가리키는 $(this)을 사용하고이를 상대 지점으로 사용하여 원하는 항목을 찾습니다.

jquery를 사용하는 경우 쉽게 해결할 수 있습니다.

$('#items").on "change", ".product-select", -> 
    product_select = $(this) 
    product_select.parent().find('.cost_input').val(product_select.selected().data("unit_cost")) 

이것은 .product-select 요소에서 발생 #items 안에 모든 change 이벤트를 캡처합니다. 동적 인 것이므로 새롭게 추가 된 항목에도 적용됩니다. 선택한 값을 찾으려면 jquery를 약간 수정해야 할 수도 있습니다. 내가 말했듯이, 테스트되지 않은 코드이지만, 당신이 드리프트를 얻길 바랍니다.