2017-02-23 77 views
0

我與引導nav-tabs,當觸發標籤的展示活動的工作,我做了一個if測試,如果失敗了我所說的e.preventDefault();如下:避免對引導標籤Show事件

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    if(test){ 
     e.preventDefault(); 
     return false; 
    } 
}); 

其中一期工程在這種情況下。

在另一種情況下我叫AJAX功能,它會還給我一個結果,根據這個結果我想阻止Show事件的默認行爲,如下:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    checkPageLayoutsAreSelected(); 
    window.getLayoutAreSelectedResult = function(xhr, status, args) { 
     if(args.returnedValue === false){ 
      e.preventDefault(); 
      console.log('Hello.'); 
      return false; 
     } 
    }; 
}); 

的checkPageLayoutsAreSelected()函數將執行ajax調用,如果成功,它將調用window.getLayoutAreSelectedResult()函數。 請注意,在這種情況下會打印Hello記錄的消息。

這裏的問題是即使我打電話給e.preventDefault();也總是顯示標籤。

我認爲在ajax調用完成之前show事件已經觸發。

我該如何解決這個問題?

我認爲是完成此另一種方法,這是要記住的最新選擇的選項卡,然後,而不是調用我們顯示當前選中的標籤前的最新選定的選項卡的e.preventDefault(),所以以下:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 

    //TODO : get the latest selected tab before this current selected tab 

    checkPageLayoutsAreSelected(); 
    window.getLayoutAreSelectedResult = function(xhr, status, args) { 
     if(args.returnedValue === false){ 
      var tab = $(".tabs").find("[data-target='"+latestSelectedTab+"']")[0]; 
      $(tab).tab('show'); 
     } 
    }; 
}); 

但我不知道如何才能在當前選定的選項卡之前獲取最新的選定選項卡。

回答

0

原則上我建議避免鏈接頁面導航與ajax調用,因爲這會在您的用戶界面中添加一個「打嗝」,這意味着該選項卡將等待,直到通話完成,然後做你想做的任何事情。

我建議你加載確定標籤內容是否顯示在頁面加載而不是在標籤點擊時應該顯示的值。你可以將這些值存儲在隱藏的輸入或者數組上,然後檢查這些值,你的瀏覽體驗就沒問題。

+0

不幸的是,如果你想這樣做,我不能這樣做,因爲'checkPageLayoutsAreSelected'不能在頁面加載 –

+0

被稱爲 「我認爲還有另一種方法來完成這一點,這是要記住最新然後不是調用e.preventDefault(),而是在當前選定的選項卡之前顯示最新選定的選項卡,因此可以使用以下語句:「 」您可以聲明一個變量,例如 '變種selectedTab' ,然後更新它,當示出像 '$( '一個[數據肘節= 「標籤」]')。在( 'show.bs.tab',函數的標籤(例如){ 如果(args.returnedValue ===假){ $(selectedTab)的.tab( '節目'); } selectedTab = selectedTab = $(e.target).attr(的 「href」); }); –