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並使用.tabs('add'...)動態添加標簽。選項卡使用ajax加載URL。問題是每次我點擊另一個標簽然后回來......標簽重新加載網址。我希望網址加載一次....任何想法?
8 个解决方案
#1
13
I think you're looking for the cache option (this defaults to false):
我想你正在尋找緩存選項(默認為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/
#2
24
Please note that the cache property of the tabs options was deprecated in jQueryUI 1.9 and removed in 1.10. See the jQueryUI 1.9 upgrade guide
請注意,選項卡選項的緩存屬性在jQueryUI 1.9中已棄用,在1.10中已刪除。請參閱jQueryUI 1.9升級指南
The recommended way to handle this now, is to use the new beforeLoad event 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 );
});
}
});
#3
3
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 );
#4
1
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加載時,將boolean設置為true並檢查每個ajax請求之前的值。
Of course you would need to do a little more work to handle more than one tab.
當然,您需要做更多的工作來處理多個選項卡。
#5
1
$(function () {
$("#tabs").tabs({
beforeLoad: function (event, ui) {
if (ui.tab.data("loaded")) {
event.preventDefault();
return;
}
ui.ajaxSettings.cache = false,
ui.panel.html('
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
1
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);
}
});
#7
0
Wrap your AJAX calls within an if statement 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
}
});
}
#8
0
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 );
});
}
});
在beforeLoad事件中添加了不推薦使用的ajaxOptions和緩存選項