remove_fields & add field link not working on nested form in rails 3.0.9

Question

I am following Ryan bates neted_forms episode 1 & 2 from rails casts, I have already implemented the nested-forms functionality in one of my project before & it's working fine without any error, But in my new project I am using the same reference from rails casts but remove & add field is not working.

Here is my model

has_many :contacts, :dependent => :destroy
accepts_nested_attributes_for :contacts, :reject_if => lambda { |a| a[:contact_name].blank? },     :allow_destroy => true

The form on which I am using add field link

       <div class="TabbedPanelsContent">
            <%= f.fields_for :contacts do |builder| %>
            <%= render "contact_fields", :f => builder %>
            <% end %>
        <p><%= link_to_add_fields "Add Contact", f, :contacts %></p>

          </div>

The partial for contacts

<div class="fields">
<p class="lable">Contact Name</p>
<p class="field"><%= f.text_field :contact_name %></p></br>

<p class="lable">Mobile Number</p>
<p class="field"><%= f.text_field :contact_mobile_number %></p></br>

<p class="lable">Email Address</p>
<p class="field"><%= f.text_field :contact_email %></p></br>
<p><%= link_to_remove_fields "remove", f %></p> </div>

The Application helper I wrote this method

 # Method for removing fields
def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end

# Method for Adding fields

  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(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")
  end

The application.js is as follows

function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".fields").hide();
 }

 function add_fields(link, association, content) {
 var new_id = new Date().getTime();
 var regexp = new RegExp("new_" + association, "g")
 $(link).up().insert({
 before: content.replace(regexp, new_id)
 });
}

Using firebug I have found one problem in the html which is getting generated while executing this code

<p><input type="hidden" value="false" name="customer[contacts_attributes][1][_destroy]"   id="customer_contacts_attributes_1__destroy"><a onclick="remove_fields(this); return false;" href="#">remove</a></p>

In the above code the value="false" may be creating problem & it should be value ="1" as my previous code is generating value ="1". can anybody help me on the above issue?

Answer 1

Put this js in application.js file

function remove_fields(link) {
$(link).prev("input[type=hidden]").val("1");
$(link).closest(".fields").hide(); }

function add_fields(link, association, content) { var new_id = new Date().getTime(); var regexp = new RegExp("new_" + association, "g"); $(link).parent().before(content.replace(regexp, new_id)); }

Answer 2

I was having problems with deletion until I added :allow_destroy => true on my parent model.