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>

编辑

我不能使用高速缓存选项，因为标签中的内容可能会改变..

答

你可以hide()或remove()执行加载后的链接（）。或者，如果您希望允许多次刷新标签内容，则可以删除第一次加载的内容并重新加载（）。

您也可以更改链接标记的标识并添加辅助行为以重新使用。

答

我认为你可以捕捉事件，检查标签是否已经有内容，如果它确实停止了ajax。

例如

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

我喜欢你的想法，但不知何故，这是行不通的。如果我在选项卡上第二次点击，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

**使用{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."); 
       }); 
      } 
     }); 
    });

此解决方案立即与当前版本的jquery-ui（1.10）一起工作，该版本缺少缓存选项。 – adosaiguas 2013-10-25 23:12:08

jQuery-UI选项卡 - 只加载一次

相关推荐