Question

I’m having a rough go integrating ryanb’s awesome nested_form gem into my rails 3.1.3 application. I’m afraid my Javascript skills are too limited to know whether it’s my code (likely) or the gem that needs changed. Maybe someone here can help.

The setup: I have a “:households” class that :accepts_nested_attributes_for “:members (people)”. I’m running a development server. I moved nested_form.js to the /app/assets/javascripts directory. I’m almost positive it is only being sourced once.

The problem: if, in the households controller “new” method, I do this:

@household = Household.new

I see only the household-native fields in the view (expected), and the “link_to_remove” and “link_to_add” links render/delete a members-fields partial (expected). If, however, I do this:

@household = Household.new
@household.members.build

I see the household-native fields in the view (expected), one rendering of the member-native fields partial (expected), but the “link_to_remove” and “link_to_add” do nothing (unexpected). I cannot add another :members partial at that point, nor remove the already displayed :members partial.

I’m stumped. Below are stripped-down source files that seem relevant. I’m getting the nested_form plugin from the git repository (last bundled 2012.04.18)…

---

/app/models/household.rb

class Household < ActiveRecord::Base
  has_many :members, :class_name => "Person"
  accepts_nested_attributes_for :members
  attr_accessible :id, :name, :member_ids
  attr_accessible :members_attributes
end #class

---

/app/models/person.rb

class Person < ActiveRecord::Base
  belongs_to :household  
  attr_accessible :id, :name_given, :name_middle, :name_family, :household_id 
end #class

---

/app/controllers/households_controller.rb

  <snip>
  # GET /households/new
  # GET /households/new.json
  def new
    @household = Household.new
    @household.members.build     # <---- Removing this changes the behavior

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @household }
    end
  end

---

/app/views/households/new.html.haml

.headbg
  .pad
    %h2 Enter a New Household
= render 'form'

---

/app/views/households/_form.html.haml

= nested_form_for @household, :html => { :class => "form-horizontal"} do |f|

  %fieldset 
    %legend Household

    .control-group
      = f.label( :name, { :class => 'control-label'} )
      .controls
        = f.text_field( :name, { :class => 'span5', :placeholder => '[household name]'} )

  %fieldset 
    %legend Household Members
    = f.fields_for :members, :html => { :class => "form-inline"} do |nested_f|
      = render :partial => 'people/nested_person_form', :locals => { :f => nested_f }
      = yield :nested_person_form
    %p
      = f.link_to_add "New Household Member", :members 

  .form-actions
    = button_tag( :class => "btn btn-primary", :disable_with => "Saving..."  ) do
      %i.icon-ok.icon-white
      Save
    = link_to households_path do
      .btn.btn-info
        %i.icon-arrow-left.icon-white
        Back to Households

---

/app/views/people/_nested_person_form.html.haml

- content_for :nested_person_form do

  .nested-fields
    .row
      .span8 
        .control-group
          = f.label( "Name", { :class => 'control-label'} )
          .controls
            = f.text_field( :name_given, { :class => 'span2', :placeholder => '[first]'} )
            = f.text_field( :name_middle, { :class => 'span2', :placeholder => '[middle]'} )
            = f.text_field( :name_family, { :class => 'span2', :placeholder => '[last]'} ) 
      .span1
        = f.link_to_remove "Remove"

---

/app/assets/javascripts/nested_form/nested_form.js

jQuery(function($) {
  window.NestedFormEvents = function() {
    this.addFields = $.proxy(this.addFields, this);
    this.removeFields = $.proxy(this.removeFields, this);
  };

  NestedFormEvents.prototype = {
    addFields: function(e) {
      // Setup
      var link    = e.currentTarget;
      var assoc   = $(link).attr('data-association');            // Name of child
      var content = $('#' + assoc + '_fields_blueprint').html(); // Fields template

      // Make the context correct by replacing new_<parents> with the generated ID
      // of each of the parent objects
      var context = ($(link).closest('.fields').find('input:first').attr('name') || '').replace(new RegExp('\[[a-z]+\]$'), '');

      // context will be something like this for a brand new form:
      // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]
      // or for an edit form:
      // project[tasks_attributes][0][assignments_attributes][1]
      if (context) {
        var parentNames = context.match(/[a-z_]+_attributes/g) || [];
        var parentIds   = context.match(/(new_)?[0-9]+/g) || [];

        for(var i = 0; i < parentNames.length; i++) {
          if(parentIds[i]) {
            content = content.replace(
              new RegExp('(_' + parentNames[i] + ')_.+?_', 'g'),
              '$1_' + parentIds[i] + '_');

            content = content.replace(
              new RegExp('(\\[' + parentNames[i] + '\\])\\[.+?\\]', 'g'),
              '$1[' + parentIds[i] + ']');
          }
        }
      }

      // Make a unique ID for the new child
      var regexp  = new RegExp('new_' + assoc, 'g');
      var new_id  = new Date().getTime();
      content     = content.replace(regexp, "new_" + new_id);

      var field = this.insertFields(content, assoc, link);
      $(link).closest("form")
        .trigger({ type: 'nested:fieldAdded', field: field })
        .trigger({ type: 'nested:fieldAdded:' + assoc, field: field });
      return false;
    },
    insertFields: function(content, assoc, link) {
      return $(content).insertBefore(link);
    },
    removeFields: function(e) {
      var link = e.currentTarget;
      var hiddenField = $(link).prev('input[type=hidden]');
      hiddenField.val('1');
      // if (hiddenField) {
      //   $(link).v
      //   hiddenField.value = '1';
      // }
      var field = $(link).closest('.fields');
      field.hide();
      $(link).closest("form").trigger({ type: 'nested:fieldRemoved', field: field });
      return false;
    }
  };

  window.nestedFormEvents = new NestedFormEvents();
  $('form a.add_nested_fields').live('click', nestedFormEvents.addFields);
  $('form a.remove_nested_fields').live('click', nestedFormEvents.removeFields);
});

---

Answer 1

Make sure you have one of the latest jQuery.js files linked in your head. Once that is loaded do not use the nested_form.js file that installs from the gem. Instead use jquery_nested_form.js.

Here is a solution that will work fine so long as you have jquery linking before the jquery_nested_form file:

<%= javascript_include_tag :defaults, 'jquery_nested_form' %>

Here is the code for the jquery_nested_form.js file:

    jQuery(function($) {
  window.NestedFormEvents = function() {
    this.addFields = $.proxy(this.addFields, this);
    this.removeFields = $.proxy(this.removeFields, this);
  };

  NestedFormEvents.prototype = {
    addFields: function(e) {
      // Setup
      var link    = e.currentTarget;
      var assoc   = $(link).attr('data-association');            // Name of child
      var content = $('#' + assoc + '_fields_blueprint').html(); // Fields template

      // Make the context correct by replacing new_<parents> with the generated ID
      // of each of the parent objects
      var context = ($(link).closest('.fields').closestChild('input, textarea').eq(0).attr('name') || '').replace(new RegExp('\[[a-z]+\]$'), '');

      // context will be something like this for a brand new form:
      // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]
      // or for an edit form:
      // project[tasks_attributes][0][assignments_attributes][1]
      if (context) {
        var parentNames = context.match(/[a-z_]+_attributes/g) || [];
        var parentIds   = context.match(/(new_)?[0-9]+/g) || [];

        for(var i = 0; i < parentNames.length; i++) {
          if(parentIds[i]) {
            content = content.replace(
              new RegExp('(_' + parentNames[i] + ')_.+?_', 'g'),
              '$1_' + parentIds[i] + '_');

            content = content.replace(
              new RegExp('(\\[' + parentNames[i] + '\\])\\[.+?\\]', 'g'),
              '$1[' + parentIds[i] + ']');
          }
        }
      }

      // Make a unique ID for the new child
      var regexp  = new RegExp('new_' + assoc, 'g');
      var new_id  = new Date().getTime();
      content     = content.replace(regexp, "new_" + new_id);

      var field = this.insertFields(content, assoc, link);
      // bubble up event upto document (through form)
      field
        .trigger({ type: 'nested:fieldAdded', field: field })
        .trigger({ type: 'nested:fieldAdded:' + assoc, field: field });
      return false;
    },
    insertFields: function(content, assoc, link) {
      return $(content).insertBefore(link);
    },
    removeFields: function(e) {
      var $link = $(e.currentTarget),
          assoc = $link.data('association'); // Name of child to be removed
      
      var hiddenField = $link.prev('input[type=hidden]');
      hiddenField.val('1');
      
      var field = $link.closest('.fields');
      field.hide();
      
      field
        .trigger({ type: 'nested:fieldRemoved', field: field })
        .trigger({ type: 'nested:fieldRemoved:' + assoc, field: field });
      return false;
    }
  };

  window.nestedFormEvents = new NestedFormEvents();
  $('form a.add_nested_fields').live('click', nestedFormEvents.addFields);
  $('form a.remove_nested_fields').live('click', nestedFormEvents.removeFields);
});
// http://plugins.jquery.com/project/closestChild
/*
 * Copyright 2011, Tobias Lindig
 *
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 */
(function($) {
        $.fn.closestChild = function(selector) {
                // breadth first search for the first matched node
                if (selector && selector != '') {
                        var queue = [];
                        queue.push(this);
                        while(queue.length > 0) {
                                var node = queue.shift();
                                var children = node.children();
                                for(var i = 0; i < children.length; ++i) {
                                        var child = $(children[i]);
                                        if (child.is(selector)) {
                                                return child; //well, we found one
                                        }
                                        queue.push(child);
                                }
                        }
                }
                return $();//nothing found
        };
})(jQuery);