Spry tabs loading data onClick

Question

We want to use the Spry tabs, but we have tons of data that
will be on each tab. We do not want to have to load all that data
when the tab structure loads when they possibly won’t be
clicking on every tab. What is the best way to do this where the
data in the tab is retrieved and loaded ONLY when they click the
tab?

Answer 1

Hi ehaemmerle,
We currently don't have any facilities built-into the
TabbedPanels widget to aid in delayed panel content loading, but
you could do something like this:
<script>
var gPanelURLS = [
"foo.php?panelID=0",
"foo.php?panelID=1",
"foo.php?panelID=2",
function LoadPanelContent(ele)
var i = TabbedPanels1.getTabIndex(ele);
var url = gPanelURLS [ i ];
var tabContentPanelEle = TabbedPanels1.getContentPanels()[ i
if (url && tabContentPanelEle)
Spry.Utils.updateContent(tabContentPanelEle, url);
</script>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="LoadPanelContent(this);">Tab1</li>
<li class="TabbedPanelsTab"
onclick="LoadPanelContent(this);">Tab2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"></div>
<div class="TabbedPanelsContent"></div>
</div>
</div>
Of course, you'll have to either force the default tab to
load when the page is loaded, or embed your default tab content in
your page.
--== Kin ==--