2016-06-12 187 views
1

我使用cocoon gem作为嵌套窗体并使用select2作为自定义选择。Rails嵌套窗体与select2

第一个集合select已按预期工作。当我添加另一个选择项目时,即使选择的项目具有相同的类别,它也不起作用。我试过this解决方案。但它没有解决我的问题。因为我已经调用了嵌套项目。

_form.html

<%= simple_form_for(@course) do |f| %> 
    <%= f.simple_fields_for :course_teachers do |course_teacher| %> 
    <%= render "course_teacher_fields", :f => course_teacher %> 
    <% end %> 
    <div class="links"> 
    <%= link_to_add_association 'Add Teacher', f, :course_teachers, class:"btn btn-info" %> 
    </div> 
<%end%> 

_course_teacher_fields.html

<div class="nested-fields"> 
    <%= f.association :teacher, collection: Teacher.all, label_method: :full_name_with_title, input_html: {class: "teacher"} %><br/> 
</div> 

app.js

$(".teacher").select2({ 
    placeholder: "Select Teacher", 
    allowClear: true 
}); 

你有什么想法?

回答

2

问题是,您的JavaScript只初始化select2,只有一次,已呈现的项目(这就是为什么你没有问题的第一个选择),但添加另一个后,select2()不会触发和未在该项目上初始化。

为了解决这个问题,在`cocoon:after-insert'之后添加一个回调,并在添加的行上触发select2事件。

所以你的JavaScript将类似于

function init_select2(selector){ 
    $(selector).select2({ 
    placeholder: "Select Teacher", 
    allowClear: true 
    }); 
}; 

init_select2(".teacher") 

$("form").on("cocoon:after-insert", function(_, row){ 
    field = $(row).find(".teacher") 
    init_select2(field); 
}); 

我还没有测试此代码,但我希望你的想法。

+0

现在工作。非常感谢您的解释和解决方案。 –