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

pedalpete pedalpete · Accepted Answer · 2011-01-04T04:19:57

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 .

Dynamically adding nested form

2 Answers