Question

I am using Bootstrap in my rails app and in particular, I would like to extend Bootstrap’s tabbable functionality in the following sense:

Each user of my site can have multiple profiles, namely model User has_many profiles, and I would like to display these profiles across tabs in their user/show page. Each profile has a name attribute which I want to display on the tab itself.

I was previously rendering these profiles using the typical conventions:

On user/show page:

<%= render 'shared/prof %>

shared/_prof:

<% if @prof_items.any? %>
  <ol class="profiles">
    <%= render partial: 'shared/prof_item', collection: @prof_items %>
  </ol>
  <%= will_paginate @prof_items %>
<% end %>

shared/_prof_items

<li id="<%= prof_item.id %>">
...content...
</li>

users_controller:

...
def show
  @user = User.find(params[:id])
  @profiles = @user.profiles.paginate(page: params[:page])
  @profile = @user.profiles.build
  @prof_items = @user.prof.paginate(page: params[:page])
  ...
end
...

So essentially I would like the outputted html to be like this:

<div class="tabbable" style="margin-bottom: 5px;">
 <ul class="nav nav-tabs" id="tabHeaders">
  <li class="active">
   <a href="#tab_<%=prof_item.id%>" data-toggle="tab">Name of first profile</a>
  </li>
  <li>
   <a href="#tab_<%=prof_item.id%>" data-toggle="tab">Name of second profile</a>
  </li>
  #and so on for each prof_item
 </ul>
<div class="tab-content" id="tabContent">
 <div class="tab-pane active id="<%=prof_item.id%>">
  #render first profile item
 </div>
 <div class="tab-pane" id="<%=prof_item.id%>">
  #render second profile item
 </div>
</div>

However I’m not sure what code I need in user/show.html.erb, what code I need in shared/_prof_item.html.erb, and what code I need in shared/_prof.html.erb.

Answer 1

You can simplify your code by using rails facility to render collections:

<%= render partial: 'shared/prof_item', collection: @prof_items) %>
<%= render partial: 'shared/profile', collection: @profiles) %>

shared/_profile.html.erb: # use local variable profile

     <div class="tab-pane active" id="<%=profile.id%>">
     #render first profile
     </div> 

shared/_prof_item.html.erb # use local variable prof_item

    <li>
    <a href="#tab_<%=prof_item.id%>" data-toggle="tab">Name of second profile item</a>
    </li>