I have a JSON that returns from the server which tabs to build,
so I init them in my JS like this:
$('#tabs').tabs( 'ajaxOptions', {
timeout: 20000,
error: function(xhr, status, index, anchor){
console.log( status, index, anchor );
}
})
.tabs('add', item.CategoryLink, item.CategoryName);
Thing is, when I click a tab, and before it is done loading I click another tab,
the previous request is aborted and never called again when I click that first one again!
this is very bad, because it obviously didn't fetch the request, so what gives?
I tried bypassing this by setting:
.tabs({ cache: false })
but this is a bad thing to do, because I don't want to have a request each time again...
it should be cachced if response was sent.
using jquery-ui 1.8.1
You are probably using the same XHR object for the AJAX call, thus canceling every previous request. This is, as far as I can see, unavoidable as you cannot manually create a new
XHR request when using the tabs
function.
Also, you have 20 (timeout: 20000,
) second timeout on clicking of your tab. What use is that?
Hth
Workaround from the bug tracker:
use this inside the tabs load event:
load: function(event, ui){
$(ui.tab).data("cache.tabs",($(ui.panel).html() == "") ? false : true);
}