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 %>
<%= 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, Commented Jan 4, 2011 at 3:12

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

2

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 .

answered Jan 4, 2011 at 4:19

pedalpete

21.7k46 gold badges133 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:27:00Z

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.

Collectives™ on Stack Overflow

Dynamically adding nested form

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related