5

I am trying to track which tab is clicked and displayed the content of clicked tab only. Since we have 8 tabs and each one has at least a form so I just want to render the tab it was just clicked; otherwise it generates bunch view state which slows down ajax call.

Visualforce:

<apex:tabPanel switchType="server" selectedTab="{!selectedTab}" value="{!selectedTab}"  id="theTabPanel" >  
    <apex:tab label="Details" name="tabDetails" id="tabDetails" styleClass="subTab" onClick="setActiveTab('taskdetails')">
       <apex:pageBlock > 
          <apex:include pageName="taskDetailView"/>
       </apex:pageBlock>
    </apex:tab>

    <apex:tab label="photos" name="tabPhotos" id="tabPhotos" styleClass="subTab" onClick="setActiveTab('photos')">                             
       <apex:pageBlock > 
          <apex:include pageName="photos"/>
       </apex:pageBlock>                
    </apex:tab>
</apex:tabPanel>

<apex:actionFunction name='setActiveTab' action='{!setActiveTab}' >
    <apex:param id='tabname' name='tabname' value=''>
</apex:actionFunction>

Controller:

public with sharing class MyControllerExtension{
        public String currentTabName;
        public String selectedTab {

            get {
                return currentTabName;                     
            }
        }
        public String setActiveTab(){
            String para = ApexPages.CurrentPage().getParameters().get('tabname');        
            System.debug('current tab is ' + para);
        }
    }

This is what my tabpanel looks like. I tried set up actionFunction and call the function on apex:tab I wasn't able to send the tab name successfully

  • 1
    Could you post the Javascript and the Apex Class corresponding to the VF page? Thanks. – subodhbahl Sep 10 '13 at 22:29
  • Thanks! I added my controller and action function and onclick event for javascript – Shinya Koizumi Sep 10 '13 at 22:57
5

Your action function should look like the following:

<apex:actionFunction action="{!setActiveTab}" name="setActiveTab">
     <apex:param id="tabname" assignTo="{!var}" value="" />
</apex:actionFunction>

Controller:

Private String var = 'photos';
public void setVar(String n) {
    var = n;
}

public String getVar() {
    return var;
}

Hope this helps. This should work!

  • I added reRender on actionFunction and change setActiveTab to setVar to make it work. Thanks – Shinya Koizumi Sep 11 '13 at 10:14
  • Yep that would have worked too, but the approach I described is a very generic approach. I am happy it worked! – subodhbahl Sep 11 '13 at 16:04
  • If you have view state in your page then better to use @RemoteAction - force201.wordpress.com/2012/06/01/…. – Keith C Oct 4 '13 at 14:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.