#196 Nested Model Form (revised)

This was one of the first casts that got me into Railscasts so I'm glad to see an update.
Just a word of caution to new users of this technique: when you have a hammer everything can look like a nail. Dynamic nested forms like this are extremely powerful and can sometimes grant the user too many chances to input bad data.

If you find yourself needing complex validations to regulate the the data coming in from the form, a solution like this might not be what's in order and you might want to limit the scope of what is possible to do. Ryan's simple example here is spot on.

This dynamic nested form technique has worked wonders for me (Thanks, Ryan!) but I've been bitten by applying it to the wrong use cases-- use discretion when deciding on a UX.

I think you should have mentioned Cocoon

thanks Ryan...

@anyone Does anyone have an example carrierwave intregration (file or image upload in in a nested model)

Amazing how much simpler this is, especially since the power shown in the unrevised editions is one of the thing that made me think Ruby was so much better than the alternatives. Thanks, Ryan!

I actually feel good about spending the $9 per month for episodes like this! That's a big statement considering how cheap I am.

How do i get it to work with simple form?

Thank you Ryan. I like this nested model forms that starting from scratch. This is awesome.
+1

If you want more flexibility, try awesome_nested_fields. =)

Does anyone know how you would make the questions answerable (perhaps assuming that you were using Devise for user authentication and had access to current_user)? I'm guessing that you would have a model that stored the ID from a User model as well as an ID from the Answer model. So then on the show page, each answer that was listed would be a link that would allow the user to answer the question.

So i guess my question is: What code would you use to then save this into the database when the user clicked the link?

Also, is this the best way to go about this? should this actually use a form instead? It seems like an easy thing to do but I'm not sure of what the Rails way to approach it is. Thanks!

What is the difference between Cocoon and awesome_nested_fields?

Any reason not to use your nested_form gem anymore?

I'm getting in this episode the same strange thing some other user mentioned in another thread. It seems it's cut off in the end, interrupting Ryan mid-sentence... Probably just a few seconds of video cut off but I think it's worth mentioning.

Great episode as always.

What if you wanted to put a validation on Question to ensure that it's not blank... or maybe validate its uniqueness against all of the other Questions to ensure none of the names are the same?

The validations are easy, but the hard part is correlating those Rails errors to which Question input actually failed in the case of multiple children errors. If you had several questions that each were non-unique or perhaps blank, Rails will simply merge all of those errors into one key, and you have no way of associating those out independently from one another.

Does anyone know a workaround on this problem?

THANK YOU! I wrote my college Software Engineering project using the old version of this video, and this new approach makes it so much simpler! Keep them coming.

Awesome update on this technique, Ryan. And thanks everyone for the additional gem suggestions (cocoon and awesome_nested_fields).

How this would work when the models are associated via a has_many :through association?

I'm trying to follow the same steps, however nothing is displayed in my form.

I remember that the first episode regarding this topic used to build the objects in the controller, e.g. Question.new, so that they would be made available in the view. I found really weird that this wasn't mentioned this time.

Did that behavior changed in Rails?

In order to make it work with has_many :through I need to build "by hand" the associated object in my controller?

Thanks :)

Hi Ryan,

Thanks for all the great RailsCasts - I'm learning a ton of stuff!

I'm using your adding/deleting field partials fairly extensively and ran into a couple of things others may find useful:

1. Your .gsub('\n','') removing newlines causes slight horizontal shifting of fields on inline forms. This was easily fixed by escaping rather than removing newlines using .gsub('\n','&#xA').

2. jQuery won't recognize events from controls created this way. Apparently the solution is to use .on() (formerly .live and .delegate) though I have yet to try this.

Thanks again for all your great tutorials and keep up the good work.

Cheers,
Peter

In Rails 3.0.3 I get "undefined method `klass'" from the application_helper.

This is the syntax I'm using:

def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, :child_index => id) do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    
    link_to(name, '#', :class => "add_fields", :data => {:id => id, :fields => fields.gsub("\n", "")})
  end

Is my syntax correct? Does "klass" work with my rails version?

Thanks

Quick Q Ryan - the models I'm working with are connecting using has_many :through, and I'm getting issues with creating the sub-objects via the update method, here's the exception:

ActiveRecord::RecordNotFound
Couldn't find Question with ID=1 for Quiz with ID=9

For context, Quizzes have many questions through a join table.

Anyway, decent chance I'll have this fixed before anyone has a chance to reply, but seemed like something enough people might be trying to do to warrant a comment.

Back to figuring it out.. :D

Great tutorial as always. I did run into a problem though when trying to implement it into my app. When I add an extra field it didn't show up in the params sent to the controller.

I found the problem was I had put the form into a table and it didn't work well with this. I simply removed the table and it all started to work.

This is working great for me except for one issue. I have SEVERAL nested models.

A workout has_many steps, a step has_many actions, an action has_many instructions. When I click to add a new step, I would like that step to be populated with on action fieldset, and that action fieldset, populated with one instruction fieldset. But it just renders the empty step fieldset, I have to click the "add action" and then the "add instruction" buttons for those to render. Does anyone know how to get all the nested fieldsets to render when I add a step?

Data Associations:

• Workout

has_many steps

  has_many actions

     has_many instructions

I am having trouble using auto-complete with multiple fields. The first one works but the second instance does not. Been working on trying to figure out how to make it work for close to a week now. Any help would be great!

Please note I do NOT want to tokenize. Do in face want to set other fields along side the auto-complete text field too.

Thanks!

I'm trying to add an image field to my survey. I can get the image to upload and to show on the Show page. But when I go back to the Edit view, there is no image and I still see the "No file chosen" text next to the Choose File button.

I have this line of code in my Show view:

<%= image_tag question.image_url(:thumb).to_s if question.image? %>

but if I try to put that into the _form view then I get an unknown variable or method error.

I've tried a couple of if statements but haven't gotten it to work.

Thanks to anyone who can help.

I got an error on jquery:
$("form").on is not a function

I upgrated jquery to 1.7.1, but it still error.
Thanks to anyone who can help.

Thanks for this brilliant tutorial! I am new to rails and this one made a few pennies drop.

How can I achieve that destroying a question automatically destroys all associated answers records in the database?

Hi, I followed the tutorial step by step

but my remove function won't work.

add function work fine, remove using checkbox works fine. Why?

i'm trying to render a partial form in a show view but it doesn't render it, do you know why would this be?

I was able to get grandchildren to work in the forms with a special application helper function:

  def special_button_to_add_fields(name, f, association, child_association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    child_object = f.object.class.reflect_on_association(association).klass.reflect_on_association(child_association).klass.new
    new_object.wireless_client = child_object

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

Essentially, you have to create the grandchildren in this helper to have an object for the fields_for to attach to.

How would you do this if your model is not ActiveRecord based? Since I'm not using ActiveRecord, I don't have access to the accepts_nested_attributes_for method.

Great Railcast. There seems to be a problem rendering the nested model fields when implementing this solution with models that have a one-to-one association. One-to-many associations show nested model fields fine, but not one-to-one.

I'm not sure if it's exactly the same thing, but what really saved me (for what I needed) was this https://github.com/moo-li/Simple-parent-child-forms-in-Rails-3.1

Great railcast anyways!

I'm getting a Missing partial in the link_to_add_fields method and can't for the life of me figure out why. I've followed the setup exactly as described in the RailsCast.

It seems to be coming from this line:

render(association.to_s.singularize + "_fields", :f => builder)

This is a great piece of knowlege, thanks!

I encountered one problem.
The dynamic form doesn't work when I added validates :question_id, presence: true to the Answer model class.

Form is not saving and returning error: Questions answers question can't be blank
This happens only in case when you try to add a new question and add a new answer to it.

Why is this happening?

If you, like me, had trouble converting the Coffeescripts to pure Javascripts, this site is very helpful:

http://cs2js.nodejitsu.com/

Anyone got this working with mongoid?

Great tutorial, Ryan!

I was lucky enough to get this working on my machine.

The only problem I have is that the nested attributes are not saved to the database in the order in which I created them.

E.g. sometimes I create 3 answers at once, then click "Update" and the answers do appear on the form, but not in the correct order. I can't see any pattern in there, so I assume that they get saved to the database randomly.

Is there any way to fix this?

Hi guys, nice episode.
Ryan, I think that the following code could help handling validation errors.

<%= f.hidden_field :_destroy, :value => f.object._destroy %>

$("input[type=hidden][id$='_destroy'][value='true']").closest("ITEM SELECTOR").hide();

What do you think?

Thanks,
Mauro

Base on this example, How do we delete an entire survey together with it's questions and answers? Please help...

I would like to add a 'Copy' button that creates a new copy of the question with the same set of answers. I think it will be similar to the link_to_add_fields, but I cannot figure out how to capture user input and create a new nested object with those values on the fly. Any help will be appreciated. Thanks.

in our scenario we need to vary the number of associated records allowed. We have validation in the model i.e

accepts_nested_attributes_for :answers , :limit => 4,:allow_destroy => true

My question is . how do we prevent the Add Answers link from being rendered if we already have reached our limit ?

I'm having some trouble adapting railscasts with nested parameters using strong_parameters. I think this form creates an empty hash in answers_attributes and questions_attributes which cause problems on update for strong_parameters.

I'm using the gem nested_form - it's great! But there's a (beginner) problem I have with its output. The fields_for

<%= f.fields_for :news_item do |report| %>
...
<% end %>

seems to wrap everything in it in a <div class="fields">...</div>. How to avoid this?

I will add "reject_if" for the "accepts_nested_attributes_for" method for, ( for example) omit some attributes (for example blank attributes)

I get a ReferenceError: event is not defined loading the page as soon as I add the code to implement "remove" in javascript. From Firebug:

(function() {

jQuery(function() {
$('form').on('click', '.remove_fields', function(event) {});
$(this).prev('input[type=hidden]').val('1');
$(this).closest('fieldset').hide();
return event.preventDefault();
});

}).call(this);

Anyone have any idea what's going on? Any help appreciated.

I follow the tutorial closely but my "Add Question" does not work. When I click on it, nothing happens. When I look into Chrome developer tool, it does not seem like the javascript is executed. Can anyone advise? What are the things I could possibly miss?

In the current Rails 4 beta, the :child_index option for fields_for doesn't work. Use :index instead.

fields = f.fields_for(association, new_object, index: id) do |builder|

What if no associated records exist? How would I use this in a new form where neither table has any records, to create new records?

How could I accomplish this sort of thing with a single model? I want to create several records at once with an "Add Another Record" button, but I'm only using a single model, not nested...

I'm using this technique to add/edit multiple people to/in a household. It's a rails 4 application using turbo links along with query.turbolinks.

My application also uses jQuery datepicker plugin.

My _person_fields partial includes a date field that uses the date picker plugin, but it doesn't work. The datepicker is not being initialized in the dynamically added person_fields partials.

I've tried several methods from the Turbolinks episode with no success.

This is beyond my familiarity, but I think I need to somehow call document ready after the person_fields partial is added. Don't know how to do that.

Any suggestions are appreciated. Thanks!

Has anyone tried creating the nested forms but allowing only a certain limit of answers or number of questions? Ideally, I would like the jQuery to disable the add link for new question or answer if the number of questions has reached the maximum for that user.

Hi Ryan, thanks for the great screencast, worked like a charm!

I have a small question though:
I use the add_fields strategy to add an extra row to a table of records in a nested form. However, the td's don't get rendered correctly, because they are put into 'data', which does not render the td's (the entire table row is rendered in the first td of the row).

Any ideas on how to tackle this? I would like to continue using the table to maintain overview...

Any suggestions are greatly appreciated!

Hi everyone, I had a problem with my Nested Model From, I am not sure what did I do wrong,

  <%= simple_form_for @project do |p| %>
          <%= p.input :name %>
          <%= p.input :description %>
    <%= p.simple_fields_for :tasks do |task| %>
      <%= task.input :description %>
    <% end %>
           <%= p.button :submit %>
  <% end %>

  class Project < ActiveRecord::Base
   attr_accessible :description, :name, :tasks_attributes

   has_many :tasks
   accepts_nested_attributes_for :tasks, :reject_if => :all_blank, :allow_destroy => true
  end

class Task < ActiveRecord::Base
  belongs_to :project
  attr_accessible :description, :done
end

When I try to render the from, the nested form field does not appear. Is there any problem with my codes ?

I am getting a ArgumentError wrong number of arguments (3 for 1), when I call the link_to_add_fields helper method. I've placed it outside of the block for fields_for, like so:

        <%= f.fields_for :exercise do |builder| %>
            <%= render 'exercise_fields', f: builder %>
        <% end %>
        <%= link_to_add_fields "Add Exercise", f, :exercises %>

I'm using rails 4.0 beta. Anyone have any idea why this could be happening?

Everything works for me as it should, locally. When I push to heroku, the add question button does not work... It just redirects me to the '#'. I am having issues with it randomly locally, but if I change the class name in the js and helper to 'add_field' from 'add_fields', everything seems to work fine.

First I had an issue with the page caching and every question and answer was created twice.

3 days of troubleshooting now. Good technique, but Cocoon may be the way to go with this one.

Hi,
I've downloaded the example code and I am unable to get the remove and add links to work. The remove check_box works fine. Since the same code works on my friends machine I believe the problem may be related to the way rails is configured on my computer. When I click the remove link a get the following http://localhost:3000/surveys/1/edit#
(note the # sign after the edit).
Can anyone suggest possible reasons for this?

Sincerely,
Lisa

Is it just me, or it doesn't work in 2.0?

Great screencast. Glad to see it has been revised.

However, this solution only works for simple types of forms/associations. It becomes far more complicated (and confusing) to try and create a form like this that allows you to create different types of associations, each with their own set of fields (i.e. TextareaQuestion, MultipleChoiceQuestion, each subclassing a generic Question class). Almost like a polymorphic form builder.

I'm working on trying to create this type of form. It doesn't feel like this type of thing is supported very well by Rails form helpers. I'm having the same difficulty using the simple_form gem.

Essentially, you need to create a drill-down that allows you to select the type of association you want to create, then display the form fields relevant to the type you have selected.

It would be nice to see an example of this. I bet Ryan Bates would have a nice, clean way to accomplish this. =]

This is a great screencast. As a newbie to RoR these are invaluable.

After adapting the code to my project, I couldn't get the '.add_fields' js function to work. Clicking the link to add a child record did nothing.
I checked the web browser console and found this error when the page loaded: "TypeError: 'undefined' is not an object (evaluating '$(this).data('fields').replace')"

After struggling with it for a while I realized my indents were not set properly in the jQuery script. I feel like I need a beer...

Good screencast. However, one thing left out that was mentioned in the original ones is the :reject_if => :all_blank in the model.

Ok, so I downloaded the source code, and when a survey is updated, the params are this:

{"utf8"=>"✓",
"_method"=>"put",
"authenticity_token"=>"yO16xiTDvjH1i4mvgUSK3XiDxiyzHM87PSGZAc57Cu4=",
"survey"=>{"name"=>"Rails Survey",
"questions_attributes"=>{"0"=>{"content"=>"kjhlkjh",
"_destroy"=>"0",
"answers_attributes"=>{"0"=>{"content"=>"kjlk",
"_destroy"=>"false",
"id"=>"2"}},
"id"=>"2"}}},
"commit"=>"Update Survey",
"id"=>"1"}

But I created a rails app from scratch following line by line in the railscast and I get an arror "Cannot convert Symbol into Integer" and my params are slightly different when updating a survey:

{"utf8"=>"✓",
"_method"=>"put",
"authenticity_token"=>"I4IByp+jkutbWSHRM8z5zvLoKQ1AxfoyNhdMxJ02ORg=",
"survey"=>{"name"=>"Test 1",
"questions_attributes"=>{"content"=>""}},
"commit"=>"Update Survey",
"id"=>"1"}

So I have a feeling it has to do with the "0" that is before the "content" of "questions_attributes" in the source code params but not in my params. What am I doing wrong and how can I fix it?

Hi,
a newbie question. Got two models Job and Company. A company has_many jobs and each job belongs_to company. Building a form for Job which has collection select that allows user to select already existing company or create one with three fields i.e. name, info, and logo. So far all i have seen is accepts_nested_attributes_for being used in the form of model with has_many relationship and not belongs_to. I saw ryans create model through textfield railscast and this one but couldn't figure out which approach to go for. I like the create model through textfield but how to create three fields rather than one. Any suggestion would be highly appreaciated.

I don't think it's necessary to call the klass method to get a new object in the helper. We can call #new or #build on the association directly like this:

new_object = f.object.send(association).new

One point that is probably obvious for most people, but confused me at first was why we would need to swap the object_id that's set in the helper for a time value in the javascript. I was thinking along the lines of: "the object_id is already unique, right?"

Well, yes and no. A unique object_id will be generated each time the helper is called to create an "add_fields" link. But that link may then be clicked multiple times. Each time it's clicked, it's going to generate a collection of nested fields named with the same object_id. Then of course, when the form is saved only one of those records is going to be created.

There's something i'm having trouble understanding. How are the new objects being created in the link_to_add_fields helper method without making a call to the server?
As I understand, each click on the Add questions link calls the helper method. But how is the ruby code parsed when we are on the client side?
Also, I put a debugger in the function and saw it doesn't get called on clicking the link. Can anyone give a nice explanation on how this is working Client-Server wise? I'm a bit mixed up... :-/

Thanks!

Great screencast as always! I run into a problem though. Can't make it work to add fields. After click on "add" the browser jumps to the top and no field is added. Remove field is working.

Anyone had the same issue, and figured it out?

http://stackoverflow.com/questions/20136241/nested-model-forms-railscast-196-revised-adding-fields-via-jquery-not-worki

Thanks!

this guy makes the same but updated to use strong_parameters :

http://iroller.ru/blog/2013/10/14/nested-model-form-in-rails-4/

hope this help someone.

does any one know how to make something like this work with 2 none nested models? for example I have user model that has one profile(model) and one car(model)

both profile and car models are nested under user but car and profile has no relationship. I figure I can do a form_for user and use both field_for profile/car but is there a better way to do this?

Okay - so this railscasts is very useful, however I have a scenario that I need help with. Say I just want to create a Task list with no associated Task List/Project Name. So I have only one model and want the user to be able to enter multiple Tasks as they wish. How would I go about doing so?

Ryan, thanks for the Railscast, very good and just what I needed. I seem to have this working with one issue. When I create a new nested record I have two fields that are using a datepicker class and then new records (I am guessing) don't have this class attached to them.

Would anyone know how to go about getting this fixed in a dynamic enough way? Would really like to get this working.

Many thanks.

I had trouble getting the example code from GitHub running (ran into many of the issues mentioned throughout these comments). So I went ahead and created a new version of the Questionnaire app based on Rails 4 that implements strong parameters in the surveys controller in place of Rails 3 attr_accessible, and fixes the issue with Turbolinks. The rest is largely identical to the RailsCast example. Works great for me, though please feel free to submit issues or fixes if you'd like.

Working Rails 4 version:
https://github.com/dnewkerk/nested-model-form

If anyone happens to try out the Rails 4 example on iroller.ru mentioned a few comments above, note that I think the params aren't quite right in that example (log shows unpermitted parameters errors). You need to add :id as well as :_destroy to survey_params. Also you shouldn't need to add the questions controller.

Hope this helps!

I followed the tutorial of Nested Model Form (revised) http://railscasts.com/episodes/196-nested-model-form-revised?view=comments

Which is about how to create a survey with multiple models,

But I wonder how to make to survey cab be a real survey.

Let user can answer those questions and I can gather the user's feedback.

I've done the nested form by referencing to http://railscasts.com/episodes/196-nested-model-form-revised?

I can fill three models' data in one form now,

But How to saving the form data and make it available to re-fill the form ?

The relations of the models is 'One survey has many questions,and one question has many answers,'

My roughly thinking is, save all the survey_params in surveys_controller.rb

Maybe I should create a new model FormRecord to keep all the form records,

And when user comes to the form-page next time,

it'll selecting all the records he made,
and provide a checkbox and button to let him decide which form-data record he wants to fill the form.

But I have no idea what kind of the data structure I should have,

And How to fill the form via Javascript.

Is there any idea ? or reference ?

I'm having trouble with the remove link in production. The fieldset remove works however it still triggers validation even though it is no longer visible on the screen. Am i missing a step?

I am using the "link_to_add_fields" helper as used in this screencast in my "Order" model, in the order form you can "add row". It all works ok. But when editing an order, example: /order/1/edit", if the form had 5 rows, when I save the edits it saves the form with 10 rows, if form has 3 rows it saves it with 6 etc. Anybody else run into this issue?

Hi Ryan

Just wanted to say thank you very much for an excellent video. Hope you are doing well and that you soon have enough energy to return to railscast.

Hi,
Im pretty new to Rails, and Im using Cocoon.
I would like to know if instead of setting the association to 'people', I could somehow get an specific one, like Person.find(id) when using link_to_add_association

 = link_to_add_association 'add person', f, :people

Hello all, I'm currently following this guide and I'm running into a problem with the first remove answers step.

<%= f.label :content, "Answer" %>
<%= f.text_field :content %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>

jQuery ->
$('form').on 'click', '.remove_fields', (event) ->
$(this).prev('input[type=hidden]').val('1')
$(this).closest('fieldset').hide()
event.preventDefault()

when I go to test this and click on the "remove" link nothing is hidden. when I submit the form it doesn't remove the answer. Any thoughts?

Hello. Ho could we set nested params inside controller method, if we have many nested params, so that we should iterate over them an set their values to something. I have asked about that here:
http://stackoverflow.com/questions/29901150/how-to-set-values-of-nested-parameters-in-rails-4-from-controller-method

Hi I am new to Ruby on rails, I have followed this cast but i am running into a big issue now,

<%= mp.fields_for :projectmembers do |pm| %>
<%= render 'projectmember_fields', pm_form: pm %>
<% end %>
<tr><td class="addfld"><%= link_to_add "Add", mp, :projectmembers %></td></tr>

Here this render doesnt sends the local variable to the partial i am calling. but when i remove this link_to_add method it gets the local variable. Could you please help me on this

this is the query i have posted

link

Is this still relevant and working in the latest Rails?

After trying to make it work in my project for hours, I downloaded the source as a new project, ran db:setup and seed, and it doesn't work either (won't even load index without throwing a Nilclass error)

This episode has been updated to Rails 5 as a blog post Complex Forms in Rails 5.

Hi folks

was hoping for some advice:

My nested form is starting to become increasingly large and complex. I would like to collapse certain things. Is this possible?

Also is it possible to view only certain children via a drop down menu? any advice much appreciated.
rgds
Ben

Hi,

at first thanks for the great screencast.
Everything seem to work but I have the problem that after clicking on the add link TWO answers will be created.
Has anyone an idea how to solve this?

Thanks
Flo

Nice work

i hope can visit here regularly anymore

I liked the way of explaining this thing.