jQueryUI: Reload all tabs at once

Question

I'm trying to reload all open tabs at once. I use the code

var length = $("#tabs").tabs("length");
for(var i = 0; i < length; i++){
    $("#tabs").tabs("load", i);
}

It iterates through the loop perfectly but only the last tab really reloads.

Anyone with help?

Answer 1

The issue is that the tabs widget only allows one load operation to occur at any one time, hence your observation that it is the last tab that's getting updated, others aren't.

So, you'll have to do it another way. First thing is I assume you've set the cache option to true. If not, there's no point in continuing since the tab will refresh when it's made active.

What you are going to have to do is to kick off the next load operation for the next tab, once the current load operation is complete. Easiest way to do this is to have a queue of tabs that need loading and set a load event handler on the tabs (it gets fired when the tab has been loaded).

Here's a cut at it. It can be tidied up a bit, sure but at least it gives you the flavor of what I mean:

var $tabs = $("#tabs").tabs({
    cache: true,
    load: function (event, ui) {
        loadNextTab();
    }
});

var tabLoadQueue = [];

var loadNextTab = function() {
    if (tabLoadQueue.length) {
        var nextTab = tabLoadQueue.pop();
        $tabs.tabs("load", nextTab);
    }      
};

$("#load").click(function() {
    var length = $tabs.tabs("length");
    for(var i = 0; i < length; i++){
        tabLoadQueue.push(i);
    }
    loadNextTab();
});