使用Cocoon和Jquery更新fields_for中的字段 [英] Update field inside fields_for with Cocoon and Jquery

问题描述

我想使用Jquery在Cocoon gem中设置fields_for中的field的值. 我在jquery上使用change事件.

I would like to set the value of field inside fields_for with Cocoon gem using Jquery. I am using change event on jquery.

_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

_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有关，但我不知道如何处理.

The thing is, it only works for first nested record. This might be related to dynamic id produce by fields_for but I don't know how to deal with it.

任何帮助将不胜感激.

对该脚本进行了更改，这是我的问题的答案.

Change has been made to the script and this is answer to my question.

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

感谢nathanvda帮助我.

Thanks to nathanvda for helping me.

推荐答案

您使用元素ID.它在HTML页面中被认为是唯一的.您应该改用类.

You use an element ID. It is supposed unique in a HTML page. You should be using classes instead.

[更新]好的.您使用全局选择器，因此更改具有该类的所有元素.

[UPDATE] Ok. You use global selectors, so you change all elements that have the class.

我想，您真正想要的是更改刚刚插入的元素. 如文档中所示，这是可能的.只需写

What you actually want, I guess, is change the elements that were just inserted. As shown in the documentation, this is possible. Just write

$("#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事件.在change事件中，使用$(this)指向触发事件的容器，并将其用作找到所需项目的相对点.

This code is not tested, but what I do: attach the change event. In the change event, use $(this), which points to the container triggering the event, and use that as a relative point to find the wanted item.

请注意，如果仅使用jquery，这是更容易解决的方法.

Please note that this is way easier to solve, if you just use jquery.

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

这将捕获在#items内部发生在.product-select元素上的所有change事件.这是动态的，因此它也适用于新添加的项目.您可能需要对jquery进行一些摆弄，以找到选定的值.正如我所说:未经测试的代码，但我希望您能如愿以偿.

This will capture all change events, inside #items that happen on a .product-select element. Which is dynamic, so it will work for newly added items as well. You might need to fiddle with the jquery a little, to find the selected value. As I said: untested code, but I hope you get the drift.

这篇关于使用Cocoon和Jquery更新fields_for中的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！