Question

I am using jQuery UI to build tabs on my page. That works well until I add this following piece of code.

$(function () {
    $('#tabs').children("div").each(function (index) {
        $('#tabs').tabs('load', index);
    });
});

I’m trying to preload the tabs. What is interesting, is that if i run this through Firebug and put a breakpoint in that piece of code and step through, the code works perfectly. Otherwise the tabs are rendered, but the content within the tabs is not. This issue has been driving me crazy! Can anyone help?

Answer 1

If you look at the jQuery UI source for tabs the problem shows itself pretty fast, here’s the start of what happens when you call that load function:

load: function(index) {
  index = this._getIndex(index);
  var self = this, o = this.options, a = this.anchors.eq(index)[0], 
             url = $.data(a, 'load.tabs');
  this.abort();  //uh oh

When you call load on a tab, the first thing it does is kill any other tabs running an AJAX call. So if you look at your page it is pre-loading the tabs, but only the last tab, because in a quick loop, each tab kills the previous one’s AJAX request.

I think you’ll want to re-visit how you’re doing this as a whole, since the AJAX model is intended to load from the anchors (the <div> elements shouldn’t be there at all) I’m not sure exactly how your markup looks here.

You have 2 options though, you can either do the AJAX loads yourself (better IMO), or use the built-in but do it sequentially, like this:

$("#tabs").tabs({
  load: function(event, ui) {
    if(ui.index != $("#tabs a").length - 1) //not on the last tab
      $(this).tabs('load', ui.index + 1);   //load the next tab
  }
}).tabs('load', 0);                         //kick off the first

I don’t have a good environment to test the above, but we’re basically using the load event which fires when one tab finishes loading, then we start the next (so we never abort the one before in the loop). This is much slower, since we’re doing serial and not parallel requests…this is why for performance I recommend you make the .load() call yourself outside anything .tabs() offers.