Dynamically Render Database Records in Rails using Bootstrap Tabs - ruby-on-rails

Question

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'

Answer 1

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"><p><%= task.title %></p></li>
<% else %>
<li><%= task.title %></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>