Jquery-ui 选项卡（ajax）.... 重新选择选项卡时停止选项卡重新加载 url答案

【问题标题】：Jquery-ui tabs (ajax).... stop tab reloading url when tab is re-selectedJquery-ui 选项卡（ajax）.... 重新选择选项卡时停止选项卡重新加载 url
【发布时间】：2011-02-22 00:13:52
【问题描述】：

我正在使用 jquery ui 选项卡并使用 .tabs('add'...) 动态添加选项卡。选项卡使用 ajax 加载 url。问题是每次我点击另一个标签然后回来......标签重新加载网址。我希望 url 加载一次......有什么想法吗？

【问题讨论】：

标签： javascript jquery dhtml jquery-ui-tabs

【解决方案1】：

请注意，选项卡选项的cache 属性在 jQueryUI 1.9 中已被弃用，并在 1.10 中被删除。见jQueryUI 1.9 upgrade guide

现在推荐的处理方法是使用新的beforeLoad 事件来阻止 XHR 请求运行。

$( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
    }

    ui.jqXHR.success(function() {
      ui.tab.data( "loaded", true );
    });
  }
});

【讨论】：

请注意，从 jQuery 3.0 开始，ui.jqXHR.success 已被弃用和删除。上面的方案必须修改为使用tab加载事件来设置ui-tab.data('loaded',true)
修改后的解决方案贴在下面

【解决方案2】：

我认为您正在寻找cache 选项（默认为false）：

是否缓存远程标签内容，例如仅加载一次或使用每次点击。

例如：

$("#tabs").tabs({ cache:true });

这是一个简单的演示。使用 Firebug 或其他工具确保每个选项卡不会多次检索内容：http://jsfiddle.net/andrewwhitaker/D6qkW/

【讨论】：

thanx andrew，救命稻草...我的截止日期是 2morro，这让我停滞不前。再次感谢
无论如何，如果您不接受我的编辑））缓存选项已弃用：jqueryui.com/upgrade-guide/1.9/…
@lvil：我没有机会查看编辑（已被拒绝），但感谢您的提醒——我会将其编辑为答案。
现在删除了，有利于在 beforeLoad 事件jqueryui.com/upgrade-guide/1.9/…中对功能进行自编码

【解决方案3】：

打开选项卡上的缓存，或者启用 jQuery 中的全局 ajax 缓存选项，当发生需要重新加载的更改时，动态地将 Math.Rand() 之类的内容附加到 URL 的末尾，这样它就不会缓存下一次加载。

来自用于标签缓存的 jQuery 站点：


Code examples Initialize a tabs with the cache option specified. $( ".selector" ).tabs({ cache: true }); Get or set the cache option, after init. //getter
var cache = $( ".selector" ).tabs( "option", "cache" );
//setter
$( ".selector" ).tabs( "option", "cache", true );

【讨论】：

缓存我的标签效果很好......你一定误解了这个问题，但代码有帮助......投票了
我的意思是“打开”缓存——因此是代码；很高兴你知道了。

【解决方案4】：

使用变量来存储布尔值。最初设置为 false（未加载 ajax）。当您的 ajax 加载时，将布尔值设置为 true 并在每个 ajax 请求之前检查该值。

当然，您需要做更多的工作来处理多个选项卡。

【讨论】：

【解决方案5】：

$(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.");
                });
            }
        });
    });

【讨论】：

【解决方案6】：

从 jQuery 3.0 开始，jqXHR.success 已被删除，现在解决方案（修改形式为上面的 CheekySoft）

$('#tabs').tabs({
  beforeLoad: function(event,ui){
    if(ui.tab.data("loaded")){
      event.preventDefault();
      return;
    }
  },
  load: function(event,ui){
    ui.tab.data("loaded",true);
  }
});

【讨论】：

【解决方案7】：

将您的 AJAX 调用包装在 if 语句中，该语句检查之前的 AJAX 调用，即：

var ajaxed = false

if ( ajaxed == false ) {
    // your ajax call
   $.ajax({
       type: "GET",
       url: "test.js",
       dataType: "html"
       success: function(data){
          // insert html into DOM
          ajaxed = true
       }
   });
}

【讨论】：

【解决方案8】：

我发现同样问题的解决方案是完美的答案，请选择以下链接：

 $( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
    if ( ui.tab.data( "loaded" ) ) {
        event.preventDefault();
        return;
    }

    ui.jqXHR.success(function() {
        ui.tab.data( "loaded", true );
    });
}

});

Deprecated ajaxOptions and cache options added beforeLoad event

【讨论】：