Question

So I have a user profile with a tab navigation in it:

<div id="proftab">
    <ul class="nav nav-tabs">
          <li class="active">
            <%= link_to "About", about_users_path, :remote => true, :data => {:toggle=>"tab"} %>
          </li>
          <li><%= link_to "Pictures", pictures_users_path, :remote => true, :data => {:toggle=>"tab"} %></li>
    </ul>
</div>
<div class="row">
    <div id="profile" class="span9">

    </div>
</div>

I’ve managed to let Ajax render certain partials.
Now, when I click on the tabs the partials load in my target placeholder div. But my problem is that the tab list items don’t change their active class depending on which partial was rendered. Don’t really have an idea how to fix this.

I think it has something to do with the link or ids. When I build the tab like in the bootstrap documentation (with divs that are hidden and shown) it works perfectly. But I think it somehow can’t handle the partials right. I hope someone can help me!
Thx!

routes.rb

get "users/about" => 'users#about', :as => :about_users

get "users/pictures" => 'users#pictures', :as => :pictures_users

users_controller.rb

class UsersController < ApplicationController
  before_filter :authenticate_user!

  def index
    @users = User.all
  end

  def show
    @user = User.find(params[:id])
  end

  def about
    respond_to do |format|
      format.js
    end
  end

  def pictures
    respond_to do |format|
      format.js
    end
  end
end

views/users/about.js.erb

$("#profile").html("<%= escape_javascript(render(:partial => 'about')) %>");

views/users/pictures.js.erb

$("#profile").html("<%= escape_javascript(render(:partial => 'pictures')) %>");

views/users/_about.html.erb

<div class="tab-pane active" id="#about">
     about
</div> 

views/users/_pictures.html.erb

<div class="tab-pane active" id="#pictures">
     pictures
</div> 

tabs.js

$('#proftab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

Answer 1

You actually don’t need the bootstrap javascript for tabs at all. I removed the data-toggle from the links and changed my javascript to this:

$('#proftab a').click(function (e) {
    $('ul.nav-tabs li.active').removeClass('active')
    $(this).parent('li').addClass('active')
})

worked perfectly!