Невозможно заставить select2 работать при использовании simple_form и cocoon

Question

У меня есть приложение, которое использует simple_form, cocoon, bootstrap-sass и select2 все в той же форме. У меня есть все, что работает с select2 и правильно написано для первого объекта, который отображается, что, я считаю, не настроено коконом. Однако любые объекты, которые я добавляю с помощью опции link_to_add_fields, не имеют ни правильного стиля в строке, ни использования select2.

Первая форма проявляется как следующее:

Это как link_to_add_fields добавляет объект:

Я попытался с помощью функции обратного вызова для вызова select2 на вставке до/после, и я не мог заставить его работать.

Надеюсь, кто-то может указать мне в правильном направлении.

Спасибо!

Вот мои модели:

class Week < ActiveRecord::Base 

    belongs_to :pool 
    has_many :games, dependent: :destroy 

    accepts_nested_attributes_for :games 

end 
class Game < ActiveRecord::Base 

    belongs_to :week 

end 

код контроллера:

def new 
    @pool = Pool.find(params[:pool_id]) 
    if !@pool.nil? 
     @week = @pool.weeks.new 
     @game = @week.games.build 
     @week.weekNumber = @pool.weeks.count + 1 
    else 
     flash[:error] = "Cannot create week. Pool with id:#{params[:pool_id]} does not exist!" 
     redirect_to pools_path 
    end 
    end 

    def create 
    @pool = Pool.find(params[:pool_id]) 
    @week = @pool.weeks.new(week_params) 
    @week.weekNumber = @pool.weeks.count + 1 
    if @week.save 
     # Handle a successful save 
     flash[:success] = 
      "Week #{@week.weekNumber} for '#{@pool.name}' was created successfully!" 
     # Set the state to Pend 
     @week.setState(Week::STATES[:Pend]) 
     redirect_to @pool 
    else 
     render 'new' 
    end 
    end 

Вот вид формы:

new.html.erb

<% provide(:title, "Create Week #{@week.weekNumber}") %> 
<%= raw "<h1>Create Week #{@week.weekNumber}</h1>" %> 
<%= simple_form_for([@pool, @week], html: { class: 'form-horizontal' }) do |f| %> 
    <%= f.simple_fields_for :games do |g| %> 
    <%= render 'game_fields', f: g %> 
    <% end %> 
    <%= link_to_add_association 'Add New Game', f, :games %><br /><br /> 
    <%= f.button :submit, label: "Create week", 
       class: 'btn btn-large btn-primary' %> 
<% end %> 

_game_fields. html.erb

<div class='nested-fields well'> 
    <fieldset> 
    <%= f.input :awayTeamIndex, label: false, 
        collection: NflTeam.all, value_method: :id, 
        label_method: :name, 
        placeholder: "Away Team", 
        include_blank: true, 
        input_html: { id: "awayteam", class: 'span3' } %> 
    <%= f.input :homeTeamIndex, label: false, 
        collection: NflTeam.all, value_method: :id, 
        label_method: :name, 
        placeholder: "Home Team", 
        include_blank: true, 
        input_html: { id: "hometeam", class: 'span3' } %> 
    <%= f.input :_destroy, as: :hidden %> 
    &nbsp;&nbsp;&nbsp; 
    <%= link_to_remove_association "remove", f %> 
    </fieldset> 
</div> 

А вот Javascript код, я использую (или по крайней мере пытаются использовать в случае кокон обратных вызовов):

/* Setup the select2 functions */ 
$(document).ready(function() { 

    $('select#hometeam').select2({ 
    placeholder: "Home Team", 
    allowClear: true 
    }); 

    $('select#awayteam').select2({ 
    placeholder: "Away Team", 
    allowClear: true 
    }); 

    $('select#pick').select2(); 
}); 

/* setup cocoon nested forms insertion mode */ 
$(document).ready(function() { 
    $("a.add_fields"). 
    data("association-insertion-position", 'before'). 
    data("association-insertion-node", 'this'); 
}); 

$(document).ready(function() { 
    $('#awayTeamIndex') 
     .on('cocoon:after-insert', function() { 
     /* ... do something ... */ 
     $('select#awayteam').select2({ 
      placeholder: "Away Team", 
      allowClear: true 
     }); 
     }); 
}); 

Answer 1

Вы пытаетесь захватить обратный вызов на #awayTeamIndex, но насколько я вижу в вашем коде, это поле ввода. Вы должны поместить обратный вызов на контейнер-элемент, содержащий вставленные элементы.

E.g. написать

$('form').on('cocoon:after-insert', function() { 
    /* apply select2 styling */ 
}); 

Чтобы убедиться, что обратный вызов удар, вы всегда можете добавить alert или console.log.