jQuery-Ui Ajax Tabs bug?

Question

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

Answer 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

Answer 2

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