Rails 3.2.3 + Twitter Bootstrap + Nav-Tabs: How to

Question

another newbie-question regarding rails and bootstrap.

I am using something like this:

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">About us</a></li>
            <li><a href="#tab9" data-toggle="tab">Address</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <%= render 'about_us' %>
    </div>
    <div class="tab-pane" id="tab9">
        <%= render 'address' %>
    </div>
</div>

My problem is that I render 'address' which includes a form. By submitting this form I end up in an different controller. After saving a new address with this controller I would like to redirect to this page and show the address tab.

The redirect command I tried was: redirect_to salon_path(@salon.id.to_s + "#tab9") This results in calling the url .../salons/1%23tab9. What I think I need its .../salons/1#tab9.

But maybe you are having a better solution how to choose one specific tab.

Using:

gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.3'.

Answer 1

You just have to do data-toggle="tab" for each list item anchor and the class="tab-pane" for each tab

<div class="tabbable">
 <ul class="nav nav-tabs" id="proftabs">
  <li><a href="#profile_tab"  data-toggle="tab" >Profile</a></li>
  <li><a href="#friends_tab" data-toggle="tab">Friends</a></li>
  <li><a  href="#photos_tab" data-toggle="tab">Photos</a></li>
  <li><a  href="#videos_tab" data-toggle="tab">Videos</a></li>
  <li><a  href="#quotes_tab" data-toggle="tab">Quotes</a></li>

   <div class="tab-content">
        <div id="profile_tab" class="tab-pane">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt!
        </div>
    <div id="friends_tab"  class="tab-pane">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae?
    </div>
    <div id="photos_tab"  class="tab-pane">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus?
    </div>
    <div id="videos_tab"  class="tab-pane">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum!
    </div>
    <div id="quotes_tab"  class="tab-pane">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus.
    </div>
  </div>
</div>

Answer 2

I could figure it out myself, this post here brought me onto the right track: How to get Twitter-Bootstrap navigation to show active link?

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
    <li class="<%= 'active' if params[:tab] == 'tab1' %>"><a href="#tab1" data-toggle="tab">About us</a></li>
    <li class="<%= 'active' if params[:tab] == 'tab9' %>"> <a href="#tab9" data-toggle="tab">Address</a></li>
</ul>

<div class="tab-content">
    <div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active'  else 'tab-pane' end%>" id="tab1">
        <%= render 'about_us' %>
    </div>
    <div class="<%= if params[:tab] == 'tab9' then 'tab-pane active'  else 'tab-pane' end%>" id="tab9">
        <%= render 'address' %>
    </div>
</div>

And in my example I call it like this:

redirect_to salon_path(@salon.id, tab:"tab9")

Answer 3

For future reference and for users with similar issues, I would add one more feature to Marcus's response. The solution itself is perfect and works like a charm but what happens if no tab parameter is passed? Then bootstrap does not show any tab content and only the tabs are shown. For me, this looks rather ugly and unprofessional. In my case, I added the following jQuery to fix it.

$(document).ready(function() {

//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed)
//If no tab is active, make the first tab and tab-pane active
var elementAlreadyActive = false;
$('.nav-tabs li').each(function(index, li) {
    var element = $(li);
     if (element.attr("class") == "active"){
          elementAlreadyActive = true;
     }

});
if (!elementAlreadyActive){
    $('.nav-tabs li:first').addClass('active');
    $('.tab-content div:first').addClass('active');
} });

Instead of showing nothing if the parameter is not passed, the code checks all the li elements to see if any are already active. If none of them are, it makes the first tab and tab-pane active.

Although making the first tab active may not be useful to everybody, the code above can easily be modified to make a specific tab active if no parameters are passed.