javascript Jquery-ui 选项卡（ajax）.... 重新选择选项卡时停止选项卡重新加载 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5072739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery-ui tabs (ajax).... stop tab reloading url when tab is re-selected
提问by Sir Lojik
I am using jquery ui tabs and im adding tabs dynamically using .tabs('add'...). The tabs load a url using ajax. The problem is that everytime i click on another tab then come back... the tab reloads the url. i want the url loaded once.... any ideas?
我正在使用 jquery ui 选项卡，并使用 .tabs('add'...) 动态添加选项卡。这些选项卡使用 ajax 加载一个 url。问题是每次我点击另一个选项卡然后回来...该选项卡重新加载 url。我希望 url 加载一次....有什么想法吗？
采纳答案by Andrew Whitaker
I think you're looking for the cacheoption (this defaults to false):
我认为您正在寻找cache选项（默认为false）：
Whether or not to cache remote tabs content, e.g. load only once or with every click.
是否缓存远程标签内容，例如只加载一次或每次点击。
For example:
例如：
$("#tabs").tabs({ cache:true });
Here's a simple demo. Use Firebug or another tool to make sure that the content isn't being retrieved more than once per tab: http://jsfiddle.net/andrewwhitaker/D6qkW/
这是一个简单的演示。使用 Firebug 或其他工具确保每个选项卡不会多次检索内容：http: //jsfiddle.net/andrewwhitaker/D6qkW/
回答by Cheekysoft
Please note that the cacheproperty of the tabs options was deprecated in jQueryUI 1.9 and removed in 1.10. See the jQueryUI 1.9 upgrade guide
请注意，cache选项卡选项的属性在 jQueryUI 1.9 中已弃用，并在 1.10 中删除。请参阅jQueryUI 1.9 升级指南
The recommended way to handle this now, is to use the new beforeLoadevent to prevent the XHR request from running.
现在处理此问题的推荐方法是使用新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 );
});
}
});
回答by iivel
Turn on caching on the tabs, or alternatively enable the globabl ajax cache option in jQuery, when something changes that requires a reload, dynamically append something like Math.Rand() to the end of the URL so that it won't cache the next load.
打开选项卡上的缓存，或者在 jQuery 中启用 globabl ajax 缓存选项，当某些更改需要重新加载时，动态地将 Math.Rand() 之类的内容附加到 URL 的末尾，这样它就不会缓存下一个加载。
From the jQuery site for tab caching:
从用于选项卡缓存的 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 );
回答by Touhid
$(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.");
});
}
});
});
回答by The Muffin Man
Use a variable to store a boolean value. Initially set at false(ajax not loaded). When your ajax loads set the boolean to true and check the value before each ajax request.
使用变量来存储布尔值。最初设置为 false（未加载 ajax）。当您的 ajax 加载将布尔值设置为 true 并在每个 ajax 请求之前检查该值。
Of course you would need to do a little more work to handle more than one tab.
当然，您需要做更多的工作来处理多个标签。
回答by Jeremy Jacob
As of jQuery 3.0 jqXHR.success was removed, solution (modified form CheekySoft above) is now
从 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);
}
});
回答by Bhatt Akshay
I found the solution for the same problem here is the perfect answer and please prefer the link below:
我在这里找到了相同问题的解决方案是完美的答案，请更喜欢以下链接：
$( "#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
回答by Moses
Wrap your AJAX calls within an ifstatement which checks for a previous AJAX call, i.e.:
将您的 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
}
});
}
