I'm having problems adding a new table row by clicking the link_to_add function link.
As it took me some search and try&error to find out here is my solution. The key to it was using the cocoon gem by nathanvda (instead of nested_form by ryanb) that allows to define a jquery selector (called data-association-insertion-node
) on where to insert the new fieldset. In my example I'm using HAML and Twitter Bootstrap code, but you can easily replace it with your own favorites.
/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
Please note that the .nested-fields
class on the tag is essential for the remove link to work.