Open panels programatically

Use JavaScript functions to programatically open specific panels. For example, you might have a button on your page that opens a particular tabbed panel when the user clicks the button.

Remember, Spry uses a zero-based counting system, so 0 indicates the first, leftmost tabbed panel. If the tabbed panel has an ID, you can also use the ID to refer to panels.

Use the following functions to open specific tabbed panels:

<button onclick="TabbedPanels1.showPanel(0)" >open first panel</button>
<button onclick="TabbedPanels1.showPanel('tabID')">open panel</button>
<script type="text/javascript">
	var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

Comments

nimmy's dad said on Apr 26, 2007 at 10:16 PM :

I am trying to get your Open Panels Programmatically to work in the Spry tabbed Panels widget and I am finding that the requested panel opens briefly but then, the default panel pops open and stays.

I am applying the button to one panel and then using to open the next panel.

You can see it here: htttp://www.fly.com.au/spry/enter.html

I would like to know why this is happening and also I would like to apply this kind of thing to a form in each panel that when submitted would open the next panel.

Please send any responses to paul@fly.com.au

I just noticed the email address in my account is old.

Cheers,

Paul

jonmichael said on Apr 27, 2007 at 8:20 AM :

Your <button> tags don't specify the type attribute:

<button onclick="TabbedPanels1.showPanel(2)">Next</button>

so they act as submit buttons, which is the default. This means that whenever you press them, the browser is reloading the page, which is why the tabbed panels look as if they are resetting to the first panel.

If you specify the type on your buttons things should work:

<button type="button" onclick="TabbedPanels1.showPanel(2)">Next</button>

No screen name said on May 8, 2007 at 7:51 PM :

I would like to open different tabs when the page loads based on which
link is clicked on a different page.

I know how to programatically load a tab that exists on the same page,
but how do I programatically load a tab on a different page?

Donald Booth said on May 9, 2007 at 7:35 AM :

Hi Matt,
There is a sample of this in Spry 1.5 (due out mid-May), using the Spry URL Utilities. This should do exactly what you need.
Thanks,
Don
Adobe Spry Team

Donald Booth said on Aug 6, 2007 at 7:42 AM :

Here is the sample I mentioned before:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
The tabbed panel at the bottom demonstrates how to use a URL param to set the default tab.
While the links are on the same page, they can come from anywhere. It is the URL param that is important here.
Thanks,
Don

Donald Booth said on Aug 6, 2007 at 8:24 AM :

Hi,
First, we recommend that for Spry support, you use the forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
We try to keep these comments documentation related.
That being said,
Your Spry code looks correct.
I wonder if the fact that you are using the same 'thumbs' ID on multiple DIVs is causing trouble. An specific ID can only be used once on a page.
Another thing to try it is to display the <img> src value as text in the tab and you can confirm it is generating the paths you expect.
The fact that the first panel is working means you are really close.

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WS69221DB5-2671-4681-BE08-D49CEBC3124B.html