Dynamically adding nested form

Question

I've been following this railscast http://media.railscasts.com/videos/074_complex_forms_part_2.mov

I've got a task and steps. Each task can have many steps.

I'm attempting to add a nested form by clicking a link. the difference between what the railscast shows, and what I have is that i've got my steps form in my steps controller, but that shouldn't be a problem.

I'm also using rails3 with jQuery, but haven't seen any tutorials on how to do this in rails3.

My task/new.html.erb

<%= form_for @task, :html=>{:multipart => true do |f| %>
  <%= render 'form', :f=>f %>
< end >

for my task/_form.html.erb

  <%= f.label :task_name %>
  <%= f.text_field :task_name %>

 <%= f.label :media %>
 <%= f.file_field :media %>
      < div id="steps" >
          <%= render 'steps/form', :f=> f % >
      < /div>
     <%= link_to_function "Add Step" do |page|
         page.insert_html :bottom, :steps, :partial=>'steps/form', :object => Step.new end %>
&lt%= f.submit %>

steps/form.html.erb

<p class="fields">
    <%= fields_for :steps do |builder| %>
       <%= builder.label :title >
       <%= builder.text_field :title >
       <%= builder.label :description %>
       <%= builder.text_area :description %>
    <% end %>
</p>

The page loads fine, but when I click the 'add step link', I get two javascript errors.

RJS error:
 TypeError: Element.insert is not a function

then

Element.insert("steps", {bottom: "<p class=\"fields\">\n\t</p>\t"});

It looks like link_to_function was deprecated in Rails3. I'm not sure how to write this yet, but I'm looking into it and will post the answer here (unless somebody beats me to it). — pedalpete, Jan 04 '11 at 03:12

score 2 · Answer 1 · answered Jan 04 '11 at 04:19

The link_to_function is no longer valid in rails3.

What I did was 1) watch this screencast http://railscasts.com/episodes/205-unobtrusive-javascript

instead of the 'link_to_function, I now have

<% link_to "Add Step", @step, :remote=>true, :class=>'addStep'%>

Then I've got a content_for to process and display the javascript (jQuery)

$('a.addStep').click(function(){
   $('div#newStep').html("<= escape_javascript(render('steps/form'))%>");
})

This is adding the form to the page, but it isn't all wired up as the render isn't connecting the step to the task. Not entirely sure how to write that yet, but the form is now being added to the page, it just won't submit properly .

score 0 · Answer 2 · edited May 23 '17 at 12:27

You should try out this gem https://github.com/ryanb/nested_form so its way easier to set it up without any headaches. Have you also checked out the Rail-casts with http://railscasts.com/episodes/196-nested-model-form-part-1 and http://railscasts.com/episodes/197-nested-model-form-part-2. Those are the brand new ones of the Complex Forms, instead its Nested Models, same thing.

Get rid of all of the 'h's and be sure to change the Jquery line at the bottom of the application helper to:

link_to_function(name, "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")

This thread can guide you: rails fields_for render partial with multiple locals producing undefined variable

Also read the comments area of the Rails casts because they usually have updated code all the way to today.

Dynamically adding nested form

2 Answers2