How to use jQuery to generate 2 new associated objects in a nested form?

Posted by mind.blank on Stack Overflow See other posts from Stack Overflow or by mind.blank
Published on 2012-06-07T13:36:21Z Indexed on 2012/06/07 22:40 UTC
Read the original article Hit count: 149

I have a model called Pair, which has_many :questions, and each Question has_one :answer.

I've been following this railscast on creating nested forms, however I want to generate both a Question field and it's Answer field when clicking on an "Add Question" link.

After following the railscast this is what I have:

..javascripts/common.js.coffee:

window.remove_fields = (link)->
  $(link).closest(".question_remove").remove()

window.add_fields = (link, association, content)->
  new_id = new Date().getTime()
  regexp = new RegExp("new_" + association, "g")
  $(link).before(content.replace(regexp, new_id))

application_helper.rb:

def link_to_add_fields(name, f, association)
   new_object = f.object.class.reflect_on_association(association).klass.new
   fields = f.simple_fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
     render(association.to_s.singularize + "_fields", :f => builder)
   end
   link_to_function(name, "window.add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")", class: "btn btn-inverse")
end

views/pairs/_form.html.erb:

<%= simple_form_for(@pair) do |f| %>
  <div class="row">
    <div class="well span4">
      <%= f.input :sys_heading, label: "System Heading", placeholder: "required", input_html: { class: "span4" } %>
      <%= f.input :heading, label: "User Heading", input_html: { class: "span4" } %>
      <%= f.input :instructions, as: :text, input_html: { class: "span4 input_text" } %>
    </div>
  </div>

  <%= f.simple_fields_for :questions do |builder| %>
    <%= render 'question_fields', f: builder %>
  <% end %>
  <%= link_to_add_fields "<i class='icon-plus icon-white'></i> Add Another Question".html_safe, f, :questions %>
  <%= f.button :submit, "Save Pair", class: "btn btn-success" %>
<% end %>

_question_fields.html.erb partial:

<div class="question_remove">
  <div class="row">
    <div class="well span4">
      <%= f.input :text, label: "Question", input_html: { class: "span4" }, placeholder: "your question...?" %>

      <%= f.simple_fields_for :answer do |builder| %>
        <%= render 'answer_fields', f: builder %>
      <% end %>
    </div>
  </div>
</div>

_answer_fields.html.erb partial:

<%= f.input :text, label: "Answer", input_html: { class: "span4" }, placeholder: "your answer" %>
<%= link_to_function "remove", "remove_fields(this)", class: "float-right" %>

I'm especially confused by the reflect_on_association part, for example how does calling .new there create an association? I usually need to use .build

Also for a has_one I use .build_answer rather than answers.build - so what does this mean for the jQuery part?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about ruby-on-rails