Load Content On Tab Open Using Spry

Question

Is it possible to load the content of a Spry tab when the tab is opened, rather than load all the content of all the tabs in the beginning?

I would prefer accomplishing this without the use of an iframe.

Answer 1

A simple enough way would be to start all the tabs off with empty content, except the one that loads with the page.

From what I see from a simple view source they have this structure.

<div class="TabbedPanels" id="tp1">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"> Tab 1 Content </div>
    <div class="TabbedPanelsContent"> Tab 2 Content </div>
    <div class="TabbedPanelsContent">
      <p>Tab 3 Content </p>
      <p>More Content</p>
      <p>More Content</p>
    </div>
    <div class="TabbedPanelsContent"> Tab 4 Content</div>
  </div>
</div>

Attach onclick event listeners on #tp1.TabbedPanelsTab, and link it to an ajax request. When the user clicks the tab, it will start the request and populate the form.

It may be easier to add an ID that references where to get the data for that particular form. For example, tab one could have ID "salesRecords". Lets also say that you get all your data from getContent.php. Now when the user actives the onclick event, you use an ajax request to fetch the information from url "getContent.php?id="+this.id, which will of course use the query string to return the revelvant information.