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);
});
//= require jquery_nested_formand everything works like a charm now. Thanks! – Dacoity