Q:

Dynamically Render Database Records in Rails using Bootstrap Tabs

I'm hoping to be able to render a tab for each of my project tasks. Currently, the only tab active is the first one (which I'm not terribly surprised since I'm including my index == 0 condition on the tabpanel div, but in my tinkering I haven't been able to select the proper tab) How can I change this to render the proper project task when selected? Is there an effective way to render this kind of content without using AJAX?
 <div class='well col-xs-8 col-xs-offset-2'>
  <ul class="nav nav-pills" role="tablist" id="myTabs">
    <% @project.tasks.each_with_index do |task, index| %>
        <li role="presentation" class="tab-pane <%= 'active' if index == 0 %>">
          <a href="#<% task.title %>" aria-controls="<% task.title.downcase %>"
             role="tab" data-toggle="tab"><%= task.title %></a>
        </li>
    <% end %>
  </ul>

  <div class="tab-content">
    <% @project.tasks.each_with_index do |task, index| %>
      <div role="tabpanel" class="tab-pane fade in <%= 'active' if index == 0 %>" id="<%= task.title.downcase %>">
        <p><%= task.title %></p>
      </div>
    <% end %>
  </div>

  <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" %>
  <%= javascript_include_tag "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" %>
</div>

In this case, the tab body should read 'Support'

A:

I would like to suggest using id with index number as shown in code below I merge the id with rails code <%=#{index}%>
below is some code sample that I created based your code above
<div class="panel with-nav-tabs panel-info">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <% @project.tasks.each_with_index do |task, index| %>
                <% if index == 0 %>
                    <li class="active"><a href="#tab<%=#{index}%>" data-toggle="tab"><p><%= task.title %></p></a></li>                       
                <% else %>
                    <li><a href="#tab<%=#{index}%>" data-toggle="tab"><%= task.title %></a></li>
                <% end %>
            <% end %>                    
        </ul>
    </div>
    <div class="panel-body">
            <div class="tab-content">
                    <% @project.tasks.each_with_index do |task, index| %>
                        <% if index == 0 %>
                            <div class="tab-pane fade in active" id="tab<%=#{index}%>">
                                <p><%= task.title %></p>
                            </div>                            
                        <% else %>
                            <div class="tab-pane fade" id="tab<%=#{index}%>">
                                <p><%= task.title %></p>
                            </div>
                        <% end %>
                    <% end %>
            </div>
    </div>

