ruby-on-rails - Rails with simple_form: link_to_add で新しいテーブル行を追加

Question

link_to_add 関数リンクをクリックして新しいテーブル行を追加する際に問題が発生しています。

Answer 1

検索と試行錯誤が必要だったので、ここで見つけるのが私の解決策です。その鍵は、nathanvda によるcocoon gem ( ryanbによる nested_formの代わりに) を使用することでした。これにより、新しいフィールドセットを挿入する場所に jquery セレクター ( と呼ばれるdata-association-insertion-node) を定義できます。私の例では、HAML と Twitter Bootstrap コードを使用していますが、自分のお気に入りに簡単に置き換えることができます。

/app/views/users/_form.html.haml:

= simple_form_for @user, :html => {:class => "form-horizontal"} do |f|
  = render "shared/error_messages", :target => @user
  .row-fluid
    .span12
      .fieldset
        = f.input :username, :label => "Username:", :placeholder => "Username"

        %table.table
          %thead
            %tr
              %th
                %i.icon-calendar
                Date
              %th
                %i.icon-pencil
                Description
              %th
                %i.icon-cog
                Action
          %tbody#user_events
            = f.simple_fields_for :user_events do |event|
              = render "user_event_fields", :f => event

        = link_to_add_association f, :user_events, :"data-association-insertion-node" => "tbody#user_events", :"data-association-insertion-method" => "append", :partial => "user_event_fields", :class => "btn" do
          %i.icon-plus
          Add new event

        %p.help-block
          %strong Please note:
          Events are only removed after confirming the changes with
          %span.label
            %i.icon-ok
            Update settings!

        = f.button :submit, :class => "btn" do
          %i.icon-ok
          Update settings!

/app/views/users/_user_event_fields.html.haml:

%tr.nested-fields
  %td= f.input_field :date, :as => :date_month_year, :class => "tooltip-bottom input-small", :rel => "tooltip", :title => "Date of event", :disabled => params[:action] == "show"
  %td= f.input_field :description, :placeholder => "Description", :class => "input-large tooltip-bottom", :rel => "tooltip", :title => "Description of event<br/>Use <strong>Markdown</strong> to format your text.", :disabled => params[:action] == "show"
  %td= f.input_field :label, :placeholder => "Label", :class => "input-medium tooltip-bottom", :rel => "tooltip", :title => "Label of event", :disabled => params[:action] == "show"
  %td= f.input_field :label_class, :collection => [["Green", "label-success"], ["Yellow", "label-warning"], ["Red", "label-important"], ["Blue", "label-info"], ["Black", "label-inverse"]], :include_blank => "Grey", :class => "input-small tooltip-bottom", :rel => "tooltip", :title => "Label color of event", :disabled => params[:action] == "show"
  %td
    = link_to_remove_association f, :class => "btn" do
      %i.icon-remove

.nested-fieldsタグのクラスは、削除リンクが機能するために不可欠であることに注意してください。