將請求發送到服務器以進行主動引導nav-pills

Question

我正在使用Twitter Bootstrap v3創建“ nav-pills”。 我的每個選項卡都有一個Bootstrap表，我每5秒更新一次值。 我的一個表更新的Java腳本代碼如下：

function LoadpData()
{ 
  $(function() {
  $.getJSON(..........);
  return false;
});
};

setInterval( LoadpData, 5000);

我的HTML文件的子部分：

<ul class="nav nav-pills" id="Tabs">
        <li class="active"><a href="#Press" data-toggle="tab">Pr</a></li>
        <li><a href="#Fl" data-toggle="tab">Fl</a></li>
        <li><a href="#Te" data-toggle="tab">Te</a></li>
        <li><a href="#Pu" data-toggle="tab">Pu</a></li>
        <li><a href="#Va" data-toggle="tab">Co</a></li>
</ul>

我想做的是找到哪個選項卡處於活動狀態，然后僅更新該選項卡上的表的數據。 所以我正在考慮在每個LoadData（）JS函數的頂部添加一條if語句，以檢查該選項卡是否處於活動狀態，如果是，則將.getJSON請求發送到服務器以獲取值，否則不執行任何操作。 我搜索后發現，使用此選擇器$（'＃Tabs li.active'）應該可以找到活動選項卡。 另外，我的每個選項卡都具有唯一的href屬性，因此使用此選擇器$（'＃Tabs a [href =“＃Fl”]'），我應該能夠獲取jquery對象，並查看它是否是活動的對象。 我是jquery新手，不勝感激，如果您能幫助我找到解決方案。

function LoadpData()
    {     
// if ($('#Tabs li.active') = $('#Tabs a[href="#Fl"]')){ 
//     $(function() {
//      $.getJSON(..........);
//      return false;
//      });
// }

Answer 1

您可以使用如下腳本：

  <script>
    $(document).ready(function() {
      setInterval(function() {
        findAndUpdate();
      }, 3000);

      function findAndUpdate() {
        // Find the active tab 
        var activeTab = $("#tabs").find("li.active");
        var activeTabIndex = activeTab.index();

        // Update the table according to index
        // var str = "";
        switch (activeTabIndex) {
          case 0:
            LoadpData0();
            //str="1";
            // update code for tab 0 table
            break;
          case 1:
            LoadpData1();
            //str="2";
            // update code for tab 1 table
            break;
          case 2:
            LoadpData2();
            //str="3";
            // update code for tab 2 table
            break;
          case 3:
            LoadpData3();
            //str="4";
            // update code for tab 3 table
            break;
          default:
            // default case             
        }
        //alert(str);
      }

      // if you want it should also be updated as soon as a user switches to a new tab, then    
      $("#tabs").on("click", "li", function() {
        setTimeout(function() {
          findAndUpdate();
        }, 30);
        // setting timeout is required as the tab should first change and then this function should be called
      });
    });
  </script>

Answer 2

您可以在點擊的html值組上設置一個jquery偵聽器。

function LoadpData() {
    $('ul.nav li a').click(function(){
    var $this = $(this);
    $this.text({your JSON values can go here});
  })
}

之后，您需要調用LoadpData() 。 根據約定，建議您在document.ready(function(){})塊中調用LoadpData

這是一個可能有用的jsFiddle： https ://jsfiddle.net/superjisan/hnxLLknv/