使用 simple_form 和 cocoon 时无法让 select2 工作

Posted 2023-05-07

【中文标题】使用 simple_form 和 cocoon 时无法让 select2 工作

【英文标题】：Can't get select2 to work when using simple_form and cocoon

【发布时间】：2013-09-23 06:56:00

【问题描述】：

我有一个使用 simple_form、cocoon、bootstrap-sass 和 select2 的应用程序，它们都以相同的形式使用。我已经使用 select2 完成了所有工作，并为第一个显示的对象设置了正确的样式，我相信这不是 cocoon 设置的。但是，我使用 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
        );
      );
);

【参考方案1】：

您尝试在#awayTeamIndex 上捕获回调，但据我在您的代码中看到的，这是一个输入字段。您应该将回调放在包含插入元素的容器元素上。

例如写

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

为确保回调被触发，您可以随时添加alert 或console.log。

【讨论】：

谢谢，完美！我不太明白你的例子，