Rails nested form and bootstrap tabs

Question

I have a nested model (exptype), and I'm using bootstrap tabs to show the has_many relationship between the parent (experiment) and it's children (exptype).

So far my code looks like:

 <div role="tabpanel">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <% @experiment.exptypes.each do |e| %>
          <li role="presentation"><a href="#exptype<%=e.id%>" aria-controls="exptype<%=e.id%>" role="tab" data-toggle="tab"><%=e.get_name%></a></li>
        <% end %>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <%= f.fields_for :exptypes do |builder| %>
          <div role="tabpanel" class="tab-pane" id="exptype<%=builder.object.id%>">
            <%=builder.object.id%>
          </div>
        <% end %>
      </div>
    </div>

The tabs themselves work. But the tab-content does not. What happens is for each tab, all the builder.object.id's are shown in each tab, and not in their respective ones.

I believe it's the fields_for loop that is causing the problem. However, I want to be able to have a tab that allows for the addition of a new exptype.

lunr · Accepted Answer · 2015-04-14 06:54:26Z

2

It should look like:

<div class="tab-content">
  <% @experiment.exptypes.each do |e| %>    
    <div role="tabpanel" class="tab-pane" id="exptype<%=builder.object.id%>">
      <%= f.fields_for :exptypes, e do |builder| %>        
        <%=builder.object.id%>
      <% end %>
    </div>
  <% end %>
</div>

fields_for is not a loop and will only create one div. Note that i also added e to the fields_for call. Take a look at here: http://apidock.com/rails/ActionView/Helpers/FormHelper/fields_for

edited Apr 14, 2015 at 6:54

answered Apr 14, 2015 at 6:20

lunr

5,2995 gold badges34 silver badges50 bronze badges

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

7 Comments

Darkstarone Over a year ago

Added the code, changes can be seen here. However, the behaviour is still the same.

lunr Over a year ago

I updated the code. I guess the div should be outside of the loop.

Darkstarone Over a year ago

I tried that just before you updated your answer. Same problem!

lunr Over a year ago

Can you make a jsfiddle from the generated HTML or post here?

lunr Over a year ago

Try with fields_for call inside of the div. I updated the code.

|

Collectives™ on Stack Overflow

Rails nested form and bootstrap tabs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related