Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Change focus in a Spry Tabbed panel

Guest
Mar 25, 2009 Mar 25, 2009
I have a tabbed panel with three tabs.
email form
client form - default tab
information

Is there a way to change the default tab to the tab that the user clicks on? Or change the default temporarily.

When the email form is submitted the panel gose back to the default panel after the form is submitted. I am trying to get the email tab to stay open so the user can see there confirmation text.

email soatman@comcast.net

Thanks for any help!

Steve



TOPICS
Extensions
6.2K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 25, 2009 Mar 25, 2009
soatman wrote:
> I have a tabbed panel with three tabs.
> email form
> client form - default tab
> information
>
> Is there a way to change the default tab to the tab that the user clicks on?
> Or change the default temporarily.

You can set which tab you want to open by using the defaultTab option in the Spry Tabbed panels. Take a look at the code for the first sample on this page as it defaults to the "Tab 3" tab:
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm

It creates the tabbed panel with the following code:
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2 });

For your case, I would suggest using server side code to change the value of the defaultTab, using 0 as the default, and whatever tab number of the one with the server response in it. Remember that Spry uses a 0 based count, as in tab 1 is 0, tab 2 is 1, etc.

FYI: Spry forum is over here:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602



--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 25, 2009 Mar 25, 2009
Danilo Celic,

Yes thank you. I am able to set the default. my need is.

I have a couple of forms that are in php script the form actions is server_self validation. These are in two of the tabs. When one is submitted the tab panel gose back to the default but I need it to stay on the same tab after the form is submitted and not go to the default tab. Is there a way of not having a default. So even after the form is submitted it stays in that tab? Maybe a way of having the default change to which even tab is pressed.
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 25, 2009 Mar 25, 2009
soatman wrote:
> Danilo Celic,
>
> Yes thank you. I am able to set the default. my need is.
>
> I have a couple of forms that are in php script the form actions is
> server_self validation. These are in two of the tabs. When one is submitted
> the tab panel gose back to the default but I need it to stay on the same tab
> after the form is submitted and not go to the default tab. Is there a way of
> not having a default. So even after the form is submitted it stays in that
> tab? Maybe a way of having the default change to which even tab is pressed.

With the tabbed panels they start off with either the first tab, or a specified tab. For your case you would set the tab to use based upon your server side processing. In PHP for example:

In your sirever side processing:
$tabToShow = 0; // 0 = 1st tab.

// Then perpform whatever processing you want and set the tab to show
// based upon whatever process decisions you want, for example:
if(processingForm()){
$tabToShow = 2; // 2 = 3rd tab
}


Then in the Spry code (probably near the bottom of your page):

var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: <?php echo($tabToShow);?> });


This will by default start off on tab 0 (1st tab), or any other tab you want, by simply setting $tabToShow to whatever tab you want. Then in your processing script, you can

Or you could add a url parameter to the action of the form within the tab you're working with and use code similar to the last example on this page (you'll have to check the code):
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html

Here's a couple of relevant snippets of JavaScript from that page. The first is from the top of the page, the second from the bottom:
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();

//The defaultTab value checks to see if the url param is defined. If it is not, it sets it to 0.
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.panel ? params.panel : 0)});


To do this, you'll have to pull the SpryURLUtils.js file from the download package and link it into your page:
http://labs.adobe.com/technologies/spry/home.html


I've also seen posted a customized "history" version of the Spry Tabbed panels that saves the panel to display in a cookie, but the page isn't currently available for some reason:
http://www.3rd-eden.com/Spry-it.com/examples/History/tabbedpanels/

--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Mar 25, 2009 Mar 25, 2009
LATEST
Danilo Celic,

I see what you have for the php script, that is what most of this site is done in.
I will try this out. I will comment back afterwards!

http://so5328.aisites.com/AI_class_IMD312_programming/final_project/index.php

Thanks alot!

Steve
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines