使用自动完成和茧宝石嵌套资源的轨道物化插件形式

我在窗体上使用materialize-sass宝石。使用自动完成功能获取供应商名称。表单上的其他字段是项目名称和数量，它们是嵌套资源。对此，我正在使用cocoon宝石使用自动完成和茧宝石嵌套资源的轨道物化插件形式

由于某种原因，第一次加载页面时，所有工作似乎都正常。但添加更多的字段似乎并没有工作。我尝试使用下拉选择，并没有显示项目列表。我将其替换为另一个自动完成功能，并且主字段显示但是自动完成功能不起作用。任何想法可能是错的？

请参阅下面的代码。

purchase_orders _forms.html.erb

<div class="col s12"> 
 
\t <%= simple_form_for(@purchase_order) do |f| %> 
 
\t <%= f.error_notification %> 
 
\t <div class="row"> 
 
\t \t <div class="col s6"> 
 
\t \t \t <%= f.input :vendor_name, input_html: { class: 'vendor_name autocomplete' } %> 
 
\t \t </div> 
 
\t </div> 
 
\t <section class="show-section"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col l12"><h4>Item List</h4></div> 
 
\t \t \t <div class="col s12"> 
 
\t \t \t \t <%= f.simple_fields_for :purchase_order_details do |purchase_order_detail| %> 
 
\t \t \t \t <%= render 'purchase_order_detail_fields', :f => purchase_order_detail %> 
 
\t \t \t \t <div class="links"> 
 
\t \t \t \t \t <%= link_to_add_association 'Add More', f, :purchase_order_details %> 
 
\t \t \t \t </div> 
 
\t \t \t \t <% end %> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </section> 
 
\t <%= f.button :submit %> 
 
\t <% end %> 
 
</div>

_purchase_order_detail_fields.html.erb

<div class="nested-fields"> 
 
\t <div class="row"> 
 
\t \t <div class="col l6"> 
 
\t \t \t <%#= f.input(:item_id, collection: Ingredient.is_active, label_method: :title, value_method: :id) %> 
 
\t \t \t <%= f.input :item_name, input_html: { class: 'item_name autocomplete' } %> 
 
\t \t </div> 
 
\t \t <div class="col l5"> 
 
\t \t \t <%= f.input :item_quantity %> 
 
\t \t </div> 
 
\t \t <div class="col l1"> 
 
\t \t \t <%= link_to_remove_association "delete", f, :class => "material-icons teal-text text-lighten-1" %> 
 
\t \t </div> 
 
\t \t <%#= f.hidden_field :item_type , :value=> params[:category_id] %> 
 
\t </div> 
 
</div>

来源

2017-11-11 Qaiser Wali

我也试过咖啡脚本使用回调重新初始化materializeForm，但似乎没有工作。 –

经过进一步调查，回调是解决问题的方法。我会将答案作为我使用的咖啡脚本发布。 –

这是我曾经是能够填充autocompelte

$.ajax 
 
    url: '/packing_materials/by_name.json' 
 
    dataType: 'json' 
 
    success: (my_res) -> 
 
    $ -> 
 
     $('input.packing_material_name.autocomplete').autocomplete data: my_res 
 

 
$(document).on 'cocoon:before-insert', -> 
 
    $.ajax 
 
    url: '/packing_materials/by_name.json' 
 
    dataType: 'json' 
 
    success: (my_res) -> 
 
     $ -> 
 
     $('input.packing_material_name.autocomplete').autocomplete data: my_res

来源

2017-11-27 15:28:04

检查了他们使用的演示项目，更具体的init.js他们使用我注意到两件事：如果你使用turbolinks，你将不得不做同样的事情，使用茧时，你将不得不做这样的事情：

$('form').on('cocoon:before-insert', function(e, insertedItem) { 
    $(insertedItem).find('select').material_select(); 
})

来源

2017-11-13 15:34:09 nathanvda

我确实使用了回调，但所需的代码是通过ajax，因此解决方案有点不同。 –

使用自动完成和茧宝石嵌套资源的轨道物化插件形式

回答

相关问题