1

I got some references for Visualforce tab creation but unable to find the issue. onclick function is not passing control to controller. Any help will be appreciated.

Visualforce Page

<apex:page id="Registration" showHeader="false" controller="SolutionLibraryTabController"  title="Solution Library" standardStylesheets="false">
    <style>
        .activeTab {background-color: #236FBD; color:white; background-image:none}
        .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
    <apex:tabPanel switchType="client" tabClass="activeTab"  inactiveTabClass="inactiveTab" value="{!var}" >
        <apex:tab label="Search" name="srch" id="srch" onclick="setActiveTab('srch')">
            <apex:include pageName="SolutionLibrarySearch"/>            
        </apex:tab>
        <apex:tab label="Insert" name="insrt" id="insrt" onclick="setActiveTab('insrt')">
            <apex:include pageName="SolutionLibraryInsert"/>                                       
        </apex:tab>
    </apex:tabPanel>
    <apex:form>
        <apex:actionFunction name='setActiveTab' action='{!setActiveTab}' reRender="none">
            <apex:param id='tabname'  assignTo="{!var}" value=""/>
        </apex:actionFunction>
    </apex:form>
</apex:page>

Cotroller

public class SolutionLibraryTabController {
    /*Tab var*/
    public String var{get;set;}

    public SolutionLibraryTabController(){
        var = 'srch';
    }

    public PageReference setActiveTab() {
        if(var=='srch'){
            var='insrt';
        }
        else {
            var = 'srch';
        }
        return null;
    }
}
7
  • What is wrong with your current page? What do you mean by it is not passing control back to controller? What is your issue?
    – Lance Shi
    Jan 24, 2017 at 5:11
  • In this visualforce page there are two tab. Search tab is default. Nothing happen on click of insert tab.
    – Rachit
    Jan 24, 2017 at 5:14
  • Do you have jQuery elsewhere on the page and didn't include it here?
    – Adrian Larson
    Jan 24, 2017 at 5:21
  • 2
    apex:tab itself can enable you to switch between tabs. So If all of your actionFunction code is just to switch between tabs, I suggest you to remove all of them - you are only confusing the page
    – Lance Shi
    Jan 24, 2017 at 5:22
  • @Adrian Larson - No JQuery code in page.
    – Rachit
    Jan 24, 2017 at 5:27

2 Answers 2

0

Modify your vf page like this. If you need to pass control to controller remove onclick and use ontableave orontabenter events. Call your actionmethod inside that. I just executed below code successfully. And one more thing you don't need to pass {!var} as parameter with your actionmethod. Since its a controller variable bind with your vf page it will update on tab change.

Vf page:-

<apex:page id="Registration" showHeader="false" controller="SolutionLibraryTabController"  title="Solution Library" standardStylesheets="false">

    <style>
        .activeTab {background-color: #236FBD; color:white; background-image:none}
        .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>

    <apex:tabPanel switchType="client" tabClass="activeTab"  inactiveTabClass="inactiveTab" value="{!var}" >
        <apex:tab label="Search" name="srch" id="srch" ontableave="setActiveTab();" >
            <apex:include pageName="SolutionLibrarySearch"/>            
        </apex:tab>
        <apex:tab label="Insert" name="insrt" id="insrt" ontableave="setActiveTab();" >
            <apex:include pageName="SolutionLibraryInsert"/>                                       
        </apex:tab>
    </apex:tabPanel>

    <apex:form >
        <apex:actionFunction name="setActiveTab" action="{!setActiveTab}" reRender="none" />
    </apex:form>

</apex:page>

Controller:-

public class SolutionLibraryTabController {
    /*Tab var*/
    public String var{get;set;}

    public SolutionLibraryTabController(){
        var = 'srch';
    }

    public PageReference setActiveTab() {
        if(var=='srch'){
            var='insrt';
        }
        else {
            var = 'srch';
        }
        System.debug('var  '+var);//Use debug to check if value is there
        return null;
    }
}

Check debug:-

12:20:39:021 USER_DEBUG [16]|DEBUG|var insrt

12:17:28:023 USER_DEBUG [17]|DEBUG|var srch

3
  • onclick ideally should work Jan 24, 2017 at 7:06
  • Thanks Reshma. It is working for me. Now getting different problem. I am using bootstrap in my both visualforce and when I am removing then tab is working. Is there a workaround for this issue ?
    – Rachit
    Jan 24, 2017 at 15:55
  • @NeelKamal can you post it as a different question.
    – Reshma
    Jan 25, 2017 at 4:44
1

The possible ways to make it workable are as follows:

  1. Do not specify switchType = "client", make it default be server.

  2. Use tab panel Id and try to rerender from actionFunction.

  3. Use selectedTab attribute of <apex:tabPanel/>

<apex:page id="Registration" showHeader="false" controller="SolutionLibraryTabController"  title="Solution Library" standardStylesheets="false">
    <style>
        .activeTab {background-color: #236FBD; color:white; background-image:none}
        .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
    <apex:tabPanel tabClass="activeTab"  id="tabpanelId" inactiveTabClass="inactiveTab" value="{!var}" selectedTab="{!var}">
        <apex:tab label="Search" name="srch" id="srch" onclick="setActiveTab('srch')">
            <apex:include pageName="SolutionLibrarySearch"/>            
        </apex:tab>
        <apex:tab label="Insert" name="insrt" id="insrt" onclick="setActiveTab('insrt')">
            <apex:include pageName="SolutionLibraryInsert"/>                                       
        </apex:tab>
    </apex:tabPanel>
    <apex:form >
        <apex:actionFunction name="setActiveTab" action="{!setActiveTab}" reRender="tabpanelId,values">
            <apex:param id="tabname"  assignTo="{!var}" value=""/>
        </apex:actionFunction>
        
        <apex:outputPanel id="values">
            <apex:outputText value="{!var}" label="You have selected:" />
    </apex:outputPanel>
    </apex:form>
</apex:page>

For more information, refer apex:tab and apex:tabPanel

You must log in to answer this question.

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