How can I format this ruby on rails/ haml page to make my sub-data points appear below the main data?

Question

I am new to ruby on rails and I am currently using the cocoon gem to build a simple nested form in haml. The code below is a view that shows my "section" data (section is the parent) with an optional question form that gets embedded onto the page if the user clicks the "add question" button.

When the form initially renders, we see the ideal situation. The section fields are on the screen, the question heading is beneath it and the "add_question" button appears there too.

When I click "add_question", 2 question sets appear on the page - ABOVE the section fields. I'd like them to appear below the section fields but I do not know how I can do that. There is no special CSS affecting the page, this is a simply page.

The section view page is here:

%h2 Sections
= semantic_form_for @section do |f|
  = f.inputs do
    = f.input :title
    = f.input :body, :class => "textareea", :rows => 40, :cols => 6 
    = f.input :image_file_name
    = f.check_box :good_opinion, :class => "checkbox"
    = f.label "Check me if you have a good opinion of this feature", :class => "checkbox" 
    %hr
    %h3 Questions
    #questions
    = f.semantic_fields_for :section.questions do |question|
      = render 'question_fields', :f => question
      .links
    = link_to_add_association 'add question', f, :questions
  %p 
  %input{type: 'submit', value: 'Submit'}

The question_fields form partial is here (the .nested-fields css style is currently empty):

.nested-fields
  = f.inputs do
    = f.input :question_text
    = f.input :answer_text
    = f.input :section_id
    = link_to_remove_association "remove question", f

Any idea as to what I can do to make this better?

Answer 1

link_to_add_association has these options:

• name: the text to show in the link f: the form builder association: the name of the association (plural) of which a new instance needs to be added (symbol or string).

• html_options: extra html-options (see link_to There are some special options, the first three allow to control the placement of the new link-data:

  • data-association-insertion-traversal : the jquery traversal method to allow node selection relative to the link. closest, next, children, etc. Default: absolute selection

  • data-association-insertion-node : the jquery selector of the node

---

Perhaps you should do something like this:

link_to_add_association 'add question', f, :questions, data: {"association-insertion-method" => "after"}