Calling Controller Method when changing to and new apex:tab

Question

So what I see when I implement code like this

<apex:actionFunction name="callClass" action="{!myControllerMethod}"     reRender="TabPanel"/>
<apex:tab label="My Label Text" name="mL1" id="T1" onclick="callClass()" >

Is that this only works after I select the new tab and then click in the area below the tab itself. Is there a way to call the method when I select the tab so they don't have to click twice?

Answer 1

You need to use ontabenter event and use switchType="client" for tabPanel to get this work. Use following code it will work.

 <apex:page Controller="tabs">
<apex:form >

<h1>{!selectedTab}</h1>
<apex:tabPanel switchType="client" value="{!selectedTab}" id="theTabPanel">
   <apex:tab label="Step1: " name="one" id="tabOne" ontabenter="callClass1('one');">  
   <apex:repeat value="{!acc}" var="a"><apex:outputText >{!a.id}</apex:outputText><br/></apex:repeat></apex:tab>


   <apex:tab label="Step2: " name="two" id="tabTwo" ontabenter="callClass2('two');">  

  <apex:repeat value="{!con}" var="c"><apex:outputText >{!c.id}</apex:outputText><br/></apex:repeat></apex:tab>



   <apex:tab label="Step3: " name="three" id="tabThree" ontabenter="callClass3('three');">  
   <apex:repeat value="{!acc}" var="a"><apex:outputText >{!a.id}</apex:outputText><br/></apex:repeat></apex:tab>
</apex:tabPanel>

<apex:actionFunction name="callClass1" action="{!method1}">
    <apex:param name="p1" value="" assignTo="{!selectedTab}" />
</apex:actionFunction>

<apex:actionFunction name="callClass2" action="{!method2}">
    <apex:param name="p2" value="" assignTo="{!selectedTab}" />
</apex:actionFunction>

<apex:actionFunction name="callClass3" action="{!method3}">
    <apex:param name="p3" value="" assignTo="{!selectedTab}" />
</apex:actionFunction>

 </apex:form> 
</apex:page>

Controller :

Public class tabs{

Public List<Account> acc {get; set;}
Public String selectedTab {get; set;}
Public List<Contact> con {get; set;}


Public Pagereference method1(){
selectedTab = 'one';


acc = [SELECT id from Account];


Return Null;
}


Public Pagereference method2(){

selectedTab = 'two';

con = [SELECT id from Contact];


Return Null;
}


Public Pagereference method3(){
selectedTab = 'three';
acc = [SELECT id from Account];


Return Null;
}




}

Edit: Updated code to select dynamic tabs on page.

Answer 2

Add an apex:outputpanel around your tab like (not tried your code or mine that I am adding below)

<apex:actionFunction name="callClass" action="{!myControllerMethod}"     reRender="TabPanel"/>
<apex:outputPanel onclick="callClass()">
<apex:tab label="My Label Text" name="mL1" id="T1"  >
</apex:outputPanel>

Thanks