3

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
        });
      });
});
4

1 に答える 1

5

でコールバックをキャプチャしようとしました#awayTeamIndexが、コードで確認できる限り、それは入力フィールドです。挿入された要素を含むコンテナ要素にコールバックを配置する必要があります。

例：書き込み

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

コールバックがヒットすることを確認するには、いつでもalertまたはを追加できますconsole.log。

于 2013-09-18T22:44:58.590 に答える