How to use jQuery to generate 2 new associated objects in a nested form?
- by mind.blank
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?
