Dynamically selecting a tab/ loading an external page

Home Dynamic Content Ajax Tabs Content Dynamically selecting a tab/ loading an external page

Dynamically selecting a tab/ loading an external page

Anywhere on your page, you can dynamically select a particular tab or load a new page into the content container:

Given the below Ajax Tabs instance:

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer" id="favorite">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="countrycontainer">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

Here is how to accomplish the following:

Dynamically selecting a tab anywhere on your page

After your Ajax Tab script is initialized and displayed, you can dynamically select any of its tabs either based the tab's position relative to its peers, or its ID attribute (you have to assign it one first). The method to call is the following:

instance.expandit(tabid_or_position)

The parameter entered should either a string representing the tab link's ID attribute (you need to first assign one to that tab), or an integer corresponding to that tab's position relative to its peers, to select. For the later, the counting starts at 0 (ie: 0=1st tab). For example:

<p><a href="javascript: countries.expandit(2)">Select 3rd Tab</a></p>
<p><a href="javascript: countries.expandit('favorite')">Select Tab with ID "favorite"</a></p>

Cycling between tabs sequentially

You can add the functionality of letting the user easily move between tabs, by dynamically selecting either the "next" or "previous" tab. For example, lets say you're using Ajax Tabs Content to display very long content. Instead of asking the user to scroll back up and select the next tab each time, you can add a "Next" and "Previous" pagination link at the bottom to let the user quickly move on to the next tab. Cycling tabs is done via the method:

instance.cycleit("next/prev")

The parameter entered should either be "next" or "prev", depending on the direction you wish to move:

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 280px;"><img src="roundleft.gif" border="0" /> Back</a>
<a href="javascript:countries.cycleit('next')"><img src="roundright.gif" border="0" /> Forward</a></p>

Dynamically selecting a tab using a remote link

Starting in v2.2, you can define a link on another page that selects a tab on the target page (one containing Ajax Tab Content script) when the page is loaded. In other words, depending on the referring page, a different tab can be selected by default. This is done by adding to the original link a URL parameter string specifying the Ajax Tab Content's main container ID, plus the index of the tab to select. The syntax is:

<a href="target.htm?tabinterfaceid=index">Target Page</a>

where "tabinterfaceid" is the ID of the main tab container, and index is the tab to select based on its position relative to its peers (0=1st tab). For example, given the below initialization code:

The following link (presumably on another page) causes the 2nd tab within the above Ajax Tab content instance to be selected by default when "target.htm" loads:

<a href="target.htm?flowertabs=1">Target Page</a>

If your page contains multiple Ajax Tab content instances and you wish to select a tab explicity using the URL method for all of them, you can do that as well:

<a href="target.htm?flowertabs=1&countrytabs=2>Target Page</a>

The URL parameter method of tab selection overrides both the persisted tab states and default selected tab setting using class="selected' within the HTML.

Dynamically loading an external page using Ajax

You can dynamically load an external page into the Ajax Tabs content container via Ajax, such as by using a link on the page. It's done with the below method:

instance.loadajaxpage(pageurl)

"pageurl" should be the full URL or path to the external file on your server. You cannot use this method to load a page from an outside domain, due to Ajax domain restrictions:

<p><a href="javascript: countries.loadajaxpage('external5.htm')">Load "external5.htm" into content container via Ajax</a></p>
<p><a href="javascript: countries.loadajaxpage('http://www.mysite.com/content/external5.htm')">Load into "external5.htm" content container via Ajax</a></p>

The selected tab in this case doesn't change when you load a new page directly into the content container using this method.

Dynamically loading an external page using IFRAME

You can also load an external page into the Ajax Tabs content container via IFRAME. What this does is erase whatever previous content was inside the content container, add an IFRAME tag into it, and load the desired page into the IFRAME:

instance.loadiframepage(pageurl)

"pageurl" should be the full URL or path to the external file on your server or beyond. Since the external page is loaded via IFRAME, the page can be either from your domain or outside as well (ie: http://www.google.com):

<p><a href="javascript: countries.loadiframepage('external5.htm')">Load "external5.htm" into content container via IFRAME</a></p>
<p><a href="javascript: countries.loadiframepage('http://www.google.com')">Load Google Homepage into content container via IFRAME</a></p>

In case you're wondering, the IFRAME tag that's added to the content container always carries the CSS class name "tabcontentiframe" and a name attribute of "_ddajaxtabsiframe-contentdivid", where "contentdivid" is the ID of the content container (ie: "countrydivcontainer"). You can further use this information to either style the IFRAME using CSS, or manipulate it somehow by directly accessing it via its name attribute.

On the next page, learn how to nest Ajax Tabs, so the external page fetched by a tab in itself contains another instance of Ajax Tabs Content script.

This script consists of an index page plus a supplementary page: