|
Title: How to delay ajax loading of tab content? Post by: tslatt on December 15, 2011, 08:46:21 AM 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.
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. Title: Re: How to delay ajax loading of tab content? Post by: tslatt on December 19, 2011, 09:04:44 AM 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 |