[英]Jquery-ui tabs (ajax)… stop tab reloading url when tab is re-selected
我正在使用jquery ui标签,并使用.tabs('add'...)动态添加标签。 选项卡使用ajax加载URL。 问题是每次我点击另一个标签然后回来...标签重新加载网址。 我希望网址加载一次....任何想法?
请注意,选项卡选项的cache
属性在jQueryUI 1.9中已弃用,在1.10中已删除。 请参阅jQueryUI 1.9升级指南
现在推荐的处理方法是使用新的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 );
});
}
});
我想你正在寻找cache
选项(默认为false
):
是否缓存远程选项卡内容,例如仅加载一次或每次单击。
例如:
$("#tabs").tabs({ cache:true });
这是一个简单的演示。 使用Firebug或其他工具确保每个标签不会多次检索内容: http : //jsfiddle.net/andrewwhitaker/D6qkW/
打开选项卡上的缓存,或者在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 );
$(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 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);
}
});
使用变量存储布尔值。 最初设置为false(ajax未加载)。 当你的ajax加载时将boolean设置为true并检查每个ajax请求之前的值。
当然,您需要做一些工作来处理多个选项卡。
我发现这里同样问题的解决方案是完美的答案,请更喜欢以下链接:
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
if ( ui.tab.data( "loaded" ) ) {
event.preventDefault();
return;
}
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
});
}
});
将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
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.