2012-06-18 16 views
4

所以我有在它標籤導航用戶配置文件:Rails + Twitter Bootstrap:使用Ajax呈現partials時,選項卡不會更改爲「active」?

<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> 

我已經成功地讓阿賈克斯使某些諧音。 現在,當我點擊選項卡時,partials會加載到我的目標占位符div中。但我的問題是,選項卡列表項不會根據渲染的部分更改其活動類。真的不知道如何解決這個問題。

我認爲這與鏈接或ID有關。當我在bootstrap文檔中創建選項卡時(使用隱藏和顯示的div),它可以很好地工作。但我認爲它以某種方式無法處理分部的權利。我希望有一個人可以幫助我! 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 

視圖/用戶/ about.js.erb

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

視圖/用戶/ pictures.js.erb

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

的意見/用戶/ _about.html.erb

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

的意見/用戶/ _pictures.html.erb

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

tabs.js

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

回答

9

你其實並不完全需要引導JavaScript的標籤。我從鏈接中刪除了數據切換並將javascript更改爲:

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

完美地工作!

相關問題