jQuery-UI選項卡 - 只加載一次

我想通過AJAX加載我的選項卡的內容，但只能在第一個選項卡上單擊。現在，每次點擊任何選項卡時，標籤都會被加載。這可能嗎？jQuery-UI選項卡 - 只加載一次

我的HTML

<div id="tabContainer"> 
<ul> 
<li><a href="/Home/Tab1">Tab1</a></li> 
<li><a href="/Home/Tab2">Tab2</a></li> 
<li><a href="/Home/Tab3">Tab3</a></li> 
</ul> 
</div>

編輯

我不能使用高速緩存選項，因爲標籤中的內容可能會改變..

來源

2010-03-29 user256034

你可以hide()或remove()執行加載後的鏈接（）。或者，如果您希望允許多次刷新標籤內容，則可以刪除第一次加載的內容並重新加載（）。

您也可以更改鏈接標記的標識並添加輔助行爲以重新使用。

來源

2010-03-29 13:20:37 jjclarkson

我認爲你可以捕捉事件，檢查標籤是否已經有內容，如果它確實停止了ajax。

例如

$('#example').tabs({ 
    select: function(event, ui) { 
     if($('#' + ui.panel.id).html() != ''){ 
      return; 
     } 
    } 
});

來源

2010-03-29 13:21:41 CeejeeB

我喜歡你的想法，但不知何故，這是行不通的。如果我在選項卡上第二次點擊，If語句是true，但是仍然會重新加載選項卡。 – user256034 2010-03-29 14:03:13

選項「cache」可能會解決問題。

$(".selector").tabs({ 
    cache: true 
    //some other options 
});

http://docs.jquery.com/UI/Tabs#option-cache

來源

2011-10-08 03:02:55 xinyuan

**使用{cache：true}導致不良行爲**：在一個選項卡上有一個ajax表單，它在使用jquery成功完成ajax後刷新其內容;所以在更改窗體上的數據並通過在瀏覽器中單擊刷新按鈕刷新頁面之後，我會獲得該窗體的舊HTML。 – blazkovicz 2012-02-13 08:25:09

爲我工作，謝謝 – 2017-10-26 09:30:17

$(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function (event, ui) { 
       if (ui.tab.data("loaded")) { 
        event.preventDefault(); 
        return; 
       } 
       ui.ajaxSettings.cache = false, 
       ui.panel.html('<img src="images/prettyPhoto/dark_square/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'), 
       ui.jqXHR.success(function() { 
        ui.tab.data("loaded", true); 
       }), 
       ui.jqXHR.error(function() { 
        ui.panel.html(
        "Couldn't load Data. Plz Reload Page or Try Again Later."); 
       }); 
      } 
     }); 
    });

來源

2013-06-21 20:44:04 Touhid

此解決方案立即與當前版本的jquery-ui（1.10）一起工作，該版本缺少緩存選項。 – adosaiguas 2013-10-25 23:12:08

jQuery-UI選項卡 - 只加載一次

回答

相關問題