title: Rails + Twitter Bootstrap: Tabs don't change to "active" with Ajax rendering partials?
body: <p>So I have a user profile with a tab navigation in it:</p>
  
  <pre><code>&lt;div id="proftab"&gt;
      &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="active"&gt;
              &lt;%= link_to "About", about_users_path, :remote =&gt; true, :data =&gt; {:toggle=&gt;"tab"} %&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;%= link_to "Pictures", pictures_users_path, :remote =&gt; true, :data =&gt; {:toggle=&gt;"tab"} %&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div id="profile" class="span9"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p>routes.rb</p>
  
  <pre><code>get "users/about" =&gt; 'users#about', :as =&gt; :about_users
  
  get "users/pictures" =&gt; 'users#pictures', :as =&gt; :pictures_users
  </code></pre>
  
  <p>users_controller.rb</p>
  
  <pre><code>class UsersController &lt; 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
  </code></pre>
  
  <p>views/users/about.js.erb</p>
  
  <pre><code>$("#profile").html("&lt;%= escape_javascript(render(:partial =&gt; 'about')) %&gt;");
  </code></pre>
  
  <p>views/users/pictures.js.erb</p>
  
  <pre><code>$("#profile").html("&lt;%= escape_javascript(render(:partial =&gt; 'pictures')) %&gt;");
  </code></pre>
  
  <p>views/users/_about.html.erb</p>
  
  <pre><code>&lt;div class="tab-pane active" id="#about"&gt;
       about
  &lt;/div&gt; 
  </code></pre>
  
  <p>views/users/_pictures.html.erb</p>
  
  <pre><code>&lt;div class="tab-pane active" id="#pictures"&gt;
       pictures
  &lt;/div&gt; 
  </code></pre>
  
  <p>tabs.js</p>
  
  <pre><code>$('#proftab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
  })
  </code></pre>