How to pre-load all tabs by default with jQuery

Question

If I have 4 tabs where the first 2 are loaded with ajax and the last 2 are static, how do I pre-load the 2 ajax tabs by default?

For the moment, only the first tab is automatically loaded, the second one is loaded when clicked. I want them both to be loaded so that when I click the second one, the content is already loaded. I tried to call the load event on the second tab like this:

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 1);
});

And this loads the second tab, but for some strange reason, the first one doesn't load at all; not even when I click a different tab and click back on the first one, it will not load.

Then I tried something like this:

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 0);
    $("#main-tabs").tabs("load", 1);
});

Same result, second tab is loaded, first one is not.

How can all of them (ajax ones) be loaded automatically?

Answer 1

Source of the problem

Two facts:

• When jQuery loads a tab with its load method, if another AJAX load request is in progress, this will be aborted (probably because if you select one tab and it loads by AJAX and then quickly select another to be loaded, jQuery assumes you don't want to load both - just the last one).
• When you set the first tab to be loaded by AJAX, .tabs("load",0) will be called by default to populate the first tab.

Combining these two facts, you see what's going on. load is being called first to populate the first tab, and then called again to populate the second one. The second load cancels out the first.

Possible solution

Since you can't issue multiple loads on the same tab menu at the same time, we'll have to find another way. This solution uses the load option of tabs to load each tab in sequence. In other words, when one load is finished, it starts loading the next one. When that one is finished, it loads the next one and so on.

//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];

var loadNextTab = function() {
    if (indexesToLoad.length == 0) return;
    var index = indexesToLoad.shift();
    $("#main-tabs").tabs("load",index);
};

$("#main-tabs").tabs({
    cache: true,
    load: loadNextTab
});

Possible improvements to this method:

• instead of specifying indexes to load, make it figure out itself what tabs are AJAX tabs and load them
• make it so loadNextTab can be used on multiple tabbed menus at the same time
• make it integratable (if that's a word) with other load callback functions

How did I find out what was wrong?

By using firebug. It's an addon for firefox. Firebug shows all AJAX requests in its console, and as the screenshot shows, it wasn't that hard to figure out what was going on :) I really recommend it. (There are similar tools for most major browsers - press ctrl+shift+j in chrome or F12 i IE.)