如何防止每次重新加载 Ajax 选项卡？答案

【问题标题】：How do I prevent Ajax tabs from reloading each time?如何防止每次重新加载 Ajax 选项卡？
【发布时间】：2013-07-22 20:47:39
【问题描述】：

关于这个主题有很多问题，但他们似乎想要与我正在寻找的相反！

我已经实现了带有添加和删除功能的 jQuery 选项卡（类似于此：http://jqueryui.com/tabs/#manipulation），但每个页面的内容都是通过 Ajax 拉取的（类似于此：http://jqueryui.com/tabs/#ajax）。

这工作正常，但我想在打开的标签之间交换内容被重新加载并基本上每次都重置。这样做的原因是每个选项卡的内容都包含文本突出显示功能（不同的复选框突出显示不同的单词），我希望在取消选择选项卡时保留选中的复选框。

有没有什么方法可以不用每次都重新加载来交换标签页？

//Tab variables
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
documentTabCounter = 0,
entityTabCounter = 0,
tabs = $( "#tabs" ).tabs();

//On document load, generate the tabs
$(document).ready(function() {
tabs.tabs();
});         

function addDocumentTab(document_id, document_name) {
var nameToCheck = document_name;
var numberOfTabs = 0;
var targetTab = 0;
var tabNameExists = false;

//Loop through the open tabs to check whether the tab is already open (by comparing names) 
$('#tabs ul li a').each(function(i) {
    numberOfTabs++;
    if (this.text == nameToCheck) {     
        tabNameExists = true;
        targetTab = numberOfTabs;   
    }
}); 
//If the tab is not already open, then open a new tab
if (!tabNameExists){
    var label = tabTitle.val() || document_name,
    id = "tabs-" + documentTabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, js_base_url+'document/'+document_id).replace( /#\{label\}/g, label ) );
    tabs.find( ".ui-tabs-nav" ).append( li );
    tabs.tabs( "refresh" );
    tabs.tabs( "option", "active", documentTabCounter);
    documentTabCounter++;
}
//If the tab is already open, then make it active
else {
    tabs.tabs( "option", "active", targetTab-1);
}       
};`

【问题讨论】：

标签： jquery ajax tabs reset

【解决方案1】：

例如，只需隐藏其他选项卡并显示新的选项卡

$('.tab-buttons').on('click', function(){

   $('.tabs').hide();

   // Show the tab you wan't
   $('.the-tab-to-show').show();

   // Or depending on your layout
   $(this).find('.tab').show();

});

另外，如果您仍然需要阻止 ajax 请求，那么

ajax 完成后，将 data-loaded="true" 添加到元素中
只有在标签没有得到data-loaded="true"属性的情况下才运行ajax请求

【讨论】：

谢谢，这真的很有帮助。我只是不确定如何在 Tabs 小部件的约束内实现它。目前，我在标签之间切换：tabs.tabs( "option", "active", targetTab);“活动”选项实际上是做什么的？我能适应吗？
如果你告诉我你的 ajax 是如何被调用的，我可以帮助你。
完成了，虽然我不确定它会不会有多大帮助！
标签页必须使用 jQuery UI 吗？我永远不会那样做，我看不到你从哪里通过 ajax 获取内容，所以我不知道
嗯，我自己也想知道。我最初只是为了方便而使用它，但事实证明它有点过于严格了。

【解决方案2】：

您可以将从 AJAX 提取的信息存储在变量或隐藏的 html 元素中，并且仅在其中没有存储信息时才进行 AJAX 调用。

【讨论】：