Question

I’ve got a nested model called categories and I have created a nested form to allow creation of a category and sub categories in one form.

This works fine if you pre-build the children in your new method like so:

class CategoriesController < InheritedResources::Base
  def new
    @category = Category.new
    @category.children.build
  end
end

The problem starts to happen when you want to dynamically add new children in the form using AJAX.

Here is my form:

%table
    = form_for @category do |f|
        %tr
            %td= f.label :name
            %td= f.text_field :name

        %tr
            %td(colspan=2)
                %b Sub categories

        - @category.children.each do |sub|
            = f.fields_for :children, sub do |child|
                = render "child_fields", :f => child
        %tr
            %td= link_to_add_fields "Add sub category", f, :children
        %tr
            %td= f.submit 'Save'

Here is my helper method for link_to_add_fields (as per Ryans Railscast):

module ApplicationHelper
  def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new

    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(:partial => association.to_s.singularize + "_fields", :locals => { :f => builder})
    end
    link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')")
  end  
end

And here is the Javascript which over

function add_fields(link, association, content) {
    // Generate new unique index, so base this off the current time.
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")

    // Replace new_association with the current time.    
    $(link).closest("tr").before(content.replace(regexp, new_id));
}

I noticed that on the pre-built children the rendered output is like this:

<input type="text" size="30" name="category[children_attributes][0][name]" id="category_children_attributes_0_name">

Where as the AJAX generated fields are:

<input type="text" size="30" name="category[children_attributes][1308801890744][name]" id="category_children_attributes_1308801890744_name">

This looks correct but when I go to click create only the pre-built children are saved.

Update1
If I put a debugger line in my def create and type params I only see my pre-built category not the extra one I dynamically added.

(rdb:4) params
{"utf8"=>"✓", "authenticity_token"=>"iwq1Vx3jOZZsjd79Nj+qKNXxOwWP40c8XDFS8ooGMdg=", "category"=>{"name"=>"1", "children_attributes"=>{"0"=>{"name"=>"2"}}}, "commit"=>"Save", "action"=>"create", "controller"=>"categories"}

Answer 1

This is a result of browsers (at least Firefox) behaving weirdly when a form is inside of a table. The easiest/quickest fix is to put the table inside the form. It’s a one-line change to your views/categories/new.haml file:

= form_for @category do |f|
    %table
        %tr

How I debugged it, in case it helps:
I first checked request.raw_post; the parameters weren’t there which meant rails was never even seeing the correct request. That pointed to a browser rendering issue.

I was able to debug the issue via firebug by noticing that the form closed out awkwardly when rendering your original haml. Moving the form out of the table seemed to fix it in firefox.

I’d suggest sticking to divs, mainly because it avoids a lot of weird browser issues.