Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED]JavaScript - Change Tab Within Tabbed Container App Studio

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED]JavaScript - Change Tab Within Tabbed Container App Studio
 Login/Join
 
barcher
Member
posted
I'm running into an issue trying to create a JavaScript function that will change tabs within a tabbed container built within the App Studio HTML Canvas. The generated ID for the tabbed container is windowPanel1, and the tabs have IDs windowPanel1Page_1 (default tab) and windowPanel1Page_2 (second tab).


I am attempting to use the getElementById method to get the element ID and activate it using document.getElementById('windowPanel1Page_2').click(), but this isn't working. My code below is adding an onClick event to button1, which I am intending it to move to the second tab once button1 is clicked. 
 
function button1_onClick(){
    document.getElementById('windowPanel1Page_2').click(); 
}

But this isn't working. I've also tried using the IBI function IbComposer_selectTab(tabControlID,tabNumberToSelect) function, but this also doesn't do anything.

Does anyone know how to reference these tabs using JS?

This message has been edited. Last edited by: <Emily McAllister>,


BARCHER
App Studio 8.203
Windows

 
Posts: 18 | Registered: February 02, 2015Report This Post
barcher
Member
posted Hide Post
I used this post as a starting point: HTML Tabitem.


BARCHER
App Studio 8.203
Windows

 
Posts: 18 | Registered: February 02, 2015Report This Post
Squatch
Master
posted Hide Post
This worked for me:

function button1_onclick(event) {
    IbComposer_selectTab('windowPanel1', 2);
}


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Amom
Member
posted Hide Post
Hi Barcher,

When you click on tab headears, the script add the class "IBI_DisplayBlock" when you click on the tab header of this tab panel, and remove this class when you click on the header of a second tab panel.

You could implement a listener that add and remove this class to activate or deactivate your tab panel.

Example of callback function using jQuery:

 
var pnl = $('#windowPanel1Page_1');
function button1_onClick(){
    $('windowPanel1Page_2').on('click', function (){
         pnl.addClass ("IBI_DisplaBlock");
     }); 
}


Remember to create the event to button in the HTML composer or create yourself with JavaScript/jQuery.

I hope this helps!


WebFOCUS 8
Windows, All Outputs
 
Posts: 18 | Registered: August 15, 2016Report This Post
barcher
Member
posted Hide Post
Hi Squatch,

That worked perfectly. I was trying to use 'windowPanel1Page_2' instead of 'windowPanel1'... Thanks for the example.


BARCHER
App Studio 8.203
Windows

 
Posts: 18 | Registered: February 02, 2015Report This Post
barcher
Member
posted Hide Post
Hi Amom,

Thanks for the response. I wasn't able to get this to work, but I'm not too familiar with JQuery techniques. I'll try playing around with this and see if I can get it to work.


BARCHER
App Studio 8.203
Windows

 
Posts: 18 | Registered: February 02, 2015Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED]JavaScript - Change Tab Within Tabbed Container App Studio

Copyright © 1996-2020 Information Builders