Rails + Twitter Bootstrap: Tabs don't change to "active" with Ajax rendering partials?

ajax, ruby-on-rails, tabs, twitter-bootstrap

Solution

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!

Problem

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'); }) ```

Original source