使用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屋!