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 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) |