select2のネストされたフォーム

Question

ネストされたフォームにはcocoon gemを使用し、カスタム選択にはselect2を使用します。

最初のコレクション選択が期待通りに機能しました。選択項目が同じクラスであっても、別の選択項目を追加すると、機能しません。私は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 
}); 

ですか何か考えている？

Answer 1

問題点は、レンダリングされたアイテム（つまり最初の選択に問題がない理由）でjavascriptがselect2を1回だけ初期化していますが、別のものを追加した後に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); 
}); 

ようなものになるだろう、私はこのコードをテストしていませんが、私はあなたのアイデアを得る願っています。