How to delay ajax loading of tab content?

[tslatt]

When the content of a tab is loaded by ajax with the "href" property, is it possible to delay the load until it is triggered by an event?

I have three ways that tabs are dynamically added to the page.

• (1) The user clicks a link, and a new tab is opened.
• (2) The user clicks a different type of link that opens several tabs at once.
• (3) The user just logged into the site, and the tabs they had open in their last session are automatically reopened.

Whenever multiple tabs are opened at once, I don't want the ajax content to load in all of those tabs at once. It would cause everything to load very slowly. Instead, if I load 4 tabs, I only want the visible tab's content to load, while the other 3 tabs delay their ajax content load until they are selected.

I know that for panels, that if I load the panel as collapsed, its content doesn't load until the panel is expanded. I want to do something similar with the tabs.

I've tried using "selected: false" when adding the tab to the page, thinking that it makes the most sense to not load the content until a tab is selected, but that doesn't seem to do anything at all.

Code:

$('#main-tab-bar').tabs('add',{ //add the new tab
  title: tabTitle,      //tab title
  href: tabContent,     //url to load via ajax
  cache: true,          //cache the content so the tab doesn't reload it every time this tab is selected
  iconCls: tabIcon,     //tab icon
  closable: tabClose,   //whether to show the close button on the tab
  selected: false       //whether this tab should be selected after it is added
});//end add the new tab

I put alerts on each of the tab events, and whether I put true or false for "selected", every tab has these events: onAdd, onSelect and then onLoad after I call the function above.

Does anyone know how I can achieve this? I would greatly appreciate any help anyone can give on this.

[tslatt]

I still don't have a proper solution for this, so if anyone knows how to delay the ajax load of content in a tab until is it (really) selected, please let me know!

In the mean time, if anyone is interested, here's my workaround...

On page load, I load several tabs, one after the other. I traced the events that were occurring and found that the following was happening in this order:

tab 1 onAdd event
tab 1 onSelect event
tab 2 onAdd event
tab 2 onSelect event
tab 3 onAdd event
tab 3 onSelect event
tab 1 onLoad event
tab 2 onLoad event
tab 3 onLoad event

As you can see, although 'selected' was set to false, each tab is getting selected after its add and before its load.

My tabs contain portals. Since I couldn't figure out how to get the tab content to not load until the tab was (really) selected, I figured I could at least not initialize the portal until the tab was (really) selected. Initializing the portals slows things down a lot, because the content in its panels is ajax loaded, and not loaded until the portal is initialized, because until then the panels are 'closed' and 'collapsed'. Therefore, its' imperative to delay the portal loads, or else I'd be loading several at once. Also, the width calculations for portal columns miscalculate if the portal that's being loaded is currently hidden. If you try to initialize a portal that is in a currently hidden tab, it comes out with either columns that have a width of 0, or that have strange widths, like one that's extra wide and another that's extra small. Very messed up.

This was easily handled. In the tab's onLoad, I check to see if the tab being loaded is the tab that is selected. If it is, I initialize its portal. In the tab's onSelect, I check to see if that tab has a portal container first. If it doesn't have a portal container, I know that the tab's ajax content hasn't been loaded yet, so I do not initialize the portal. If it does have a portal container, I check to see if the portal has been initialized. If it hasn't, I initialize the portal. Now when I add several tabs at once, the portal is only initialized in the last tab added, and the other tabs' portals don't get initialized until I manually select those tabs.

Code:

$('#main-tab-bar').tabs({//for all tabs (this initializes the tab bar)

  onAdd: function(title) {//when a tab is added to the page
    $('#main-tab-bar').tabs('resize'); //resize tabs
  },//end on add tab

  onLoad: function(p) {//when a tab's href is loaded via ajax
    //when loading several tabs at once, you only want to initialize the portal in the one that's shown
    //this is because if you initialize a portal in a hidden tab, the column widths get miscalculated
    //the onload events don't happen until after all of the tabs added in a batch execute (for some reason)
    //so, when the onload occurs, check to see if this tab is the one that's shown before initializing its portal
    var thisTabTitle = p.panel('options').title; //get which tab was just loaded
    var selectedTabTitle = $('#main-tab-bar').tabs('getSelected').panel('options').title; //get which tab is currently selected
    if (thisTabTitle == selectedTabTitle) {//if the currently selected tab IS the tab that was just loaded
      //initialize the portal
      var pID = $(p).find(".aportal").attr("id");//get the unique id of the portal to open
      if (pID == undefined) { pID = ""; }//if not found, use ""
      if (pID != "") {//if the portal id is found (if there is a portal in this tab)
        initializePortal(pID);//initialize the portal
      }//end if pID found
    }//else don't initialize the portal yet, because its tab is hidden
    $('#main-tab-bar').tabs('resize'); //resize tabs
  },//end on tab load

  onSelect: function(title) {//when a tab is selected
    //when a tab is selected, find out if it has a portal in it. note: onSelect fires before onLoad, so
    //just because it doesn't have a portal right now, doesn't mean it won't have one later
    //if it has a portal in it, find out if that portal has already been initialized
    //if it has a portal and it hasn't been initialized yet, initialize the portal
    var p = $('#main-tab-bar').tabs('getSelected');//get the selected panel
    var pID = $(p).find(".aportal").attr("id");//get the unique id of the portal in this tab (if there is one)
    if (pID != undefined) {//if a portal container IS in this tab (the tab content IS loaded and it HAS a portal)
      if ($(p).find(".portal").attr("id") == undefined) {//if the portal has NOT been initialized yet (it gets the class "portal" during init)
        //initialize the portal
        var pID = $(p).find(".aportal").attr("id");//get the unique id of the portal to open
        if (pID == undefined) { pID = ""; }//if not found, use ""
        if (pID != "") {//if the portal id is found (if there is a portal in this tab)
          initializePortal(pID, uID);//initialize the portal
        }//end if pID found
      }//end if the portal has NOT been initialized yet
      else {//else the portal has already been initialized
        $('#' + pID).portal('resize');//resize the portal (because if the browser resized while on another tab, this portal won't have updated)
      }//end else the portal has already been initialized
    }//end if a portal container is in this tab
    //else there is no portal container in this tab (right now), so there is no portal to initialize!
  }//end on tab selected

});//end for all tabs