0

I have an <apex:tabPanel> with several <apex:tab>.

After clicking on one tab, I am doing some validation and depending on the validation result I want to switch to another tab. How to do this from client side (I don't want to write any code for switch tab in controller)?

Here is my VisualForce page :

 <apex:page controller="TestController" showHeader="true"  > 
    <apex:form >
    <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" 
        tabClass="activeTab" inactiveTabClass="inactiveTab"> 

        <apex:tab label="Details" name="AccDetails" id="tabdetails"> 

            <apex:inputText id="tab1_Id" label="tab1_Name" value="{!AccountList}"/>
        </apex:tab> 

        <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()"> 

            <apex:inputText id="tab2_Id" label="tab2_Name2" value="{!AccountList}"/>
        </apex:tab>   
    </apex:tabPanel> 
    </apex:form>
    <script language="javascript">
    var validate = function(ele)
{
alert("inside validate " +ele);
var fNameObj = document.getElementById('{!$Component.testPage:myform:tab1_Id}').value;
var sNameObj = $$('[id$="tab1_Id"]').value;

console.log("inside validate fNameObj "+fNameObj);
console.log("inside validate "+sNameObj);

if(fNameObj.trim() == "")
{
alert("tab1Name is mandatory!");
return false;
}
return true;
}
    </script>
    </apex:page>

2 Answers 2

1

Here is an example on how you can switch tabs using JavaScript. I have used the element ids from your code. Also I have added id="testPage" for <apex:page tag. Hope this helps.

<apex:page standardController="Account" showHeader="true" id="testPage">          
    <!-- Create Tab panel -->
    <apex:form id="myForm">
        <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
            <apex:tab label="Details" name="AccDetails" id="tabdetails"> 
                <a href="#" onclick="switchTab();">Switch Tab</a>
            </apex:tab>
            <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()">
                content for tab two
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    <script type="text/javascript">
        function switchTab(){
            var tab = document.getElementById('{!$Component.testPage:myform:tabContact}_lbl');
            tab.click();
            return false;   
        }
    </script>   
</apex:page>
1
  • @RohitPatil I'm glad I was able to help. If my solution answers your question, please mark it as answer it will be helpful to others.
    – Saroj Bera
    Sep 18, 2015 at 7:22
1

Using RichFaces switchTab function, I am able to switch to another tab from Javascript.

RichFaces.switchTab('testPage:myform:AccountTabPanel','testPage:myform:tabdetails','AccDetails');

Please note that Visualforce internally runs on top of JSF and Rich Faces frameworks of J2EE. So many of the visualforce tags are part of rich faces JSF tags.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .