Jquery-ui tabs(ajax)....当重新选择选项卡时,停止选项卡重新加载URL

时间:2011-02-22 00:13:53

标签: javascript jquery dhtml jquery-ui-tabs

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

8 个答案:

答案 0 :(得分:24)

请注意,选项卡选项的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 );
    });
  }
});

答案 1 :(得分:13)

我认为您正在寻找cache选项(默认为false):

  

是否缓存远程选项卡   内容,例如仅加载一次或使用   每次点击。

例如:

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

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

答案 2 :(得分:3)

打开选项卡上的缓存,或者在jQuery中启用globabl 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 );

答案 3 :(得分:1)

使用变量存储布尔值。最初设置为false(ajax未加载)。当你的ajax加载时,将boolean设置为true并检查每个ajax请求之前的值。

当然,您需要做一些工作来处理多个标签。

答案 4 :(得分:1)

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

答案 5 :(得分:1)

自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);
  }
});

答案 6 :(得分:0)

将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
       }
   });
}

答案 7 :(得分:0)

我发现同样问题的解决方案是完美的答案,请更喜欢以下链接:

 $( "#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