1

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?

2 Answers 2

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.

7
  • This comes close unfortunately it seems sporadic. I put a counter in my function and increment it when the function is called. Single click selecting the tab seems to call the function sporadically. Double click the tab the function runs every time. Training users will definitely be a problem as single clicking the tab changes the focus and displays the tab contents but does not always execute the method and therefore does not always update the data. Any thoughts as to how to make this work with a single click? What is the difference between switchTypes: client, server and ajax?
    – Ohmicron
    Jan 19, 2016 at 13:45
  • @Ohmicron it working in fine with single click in my org.
    – MIX DML
    Jan 19, 2016 at 13:47
  • By changing the switchType from ajax to client like you show it appears to call the method on every single click of my second tab but when the tab panel is rerendered it returns focus to the first tab. How do I prevent that from happening?
    – Ohmicron
    Jan 19, 2016 at 15:42
  • Use selectedTab attribute and provide tab name which needs to be focused.
    – MIX DML
    Jan 19, 2016 at 16:02
  • You can't change selectedTab on the fly and the selected tab should always be the one they clicked on. Show tab 1 first and if they click tab 2 execute method 2 and show results on tab 2. If they click tab 3 execute method 3 and show results on tab 3. I can now get method 2 to execute on click on of tab 2 and method 3 to execute on click on tab 3 but the rerender always reverts back to the selectedTab and not the tab they just clicked and removing selectedTab does not seem to solve the problem
    – Ohmicron
    Jan 19, 2016 at 16:28
0

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

You must log in to answer this question.

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