function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
3333 

using onTabenter to invoke javascript in tabbed visualforce page

Hi, I would like to check the function of the attribute onTabEnter in <apex:tab> tag with you. As currently we are using tabbed visualforce page to display contents. I would like to load/refresh content within the selected tab only, thus I choose to use "OnTabEnter" to invoke javascript to set flags for my current tab. However, I noticed for the first time I clicked on the tab, all of my tab contents are loaded. I wonder if it is because "OnTabEnter" is a general action which applies to all when I click on only one tab.

 

Below is my code:

public class threesixtyviewController{
  private contact cnt;
  public boolean membershipTabRenderFlag = false;
  public boolean cardsTabRenderFlag = false;
  public boolean paymentTabRenderFlag = false;
  public boolean signUpGiftTabRenderFlag = false;
  //public String tabInFocus = System.currentPageReference().getParameters().get('tab');

  public threesixtyviewController(ApexPages.StandardController stdController){}
 
    public Boolean getmembershipTabRenderFlag(){
        return membershipTabRenderFlag;
    }    
    public void setmembershipTabRenderFlag(){
           membershipTabRenderFlag = true;
           }

    public Boolean getcardsTabRenderFlag(){
        return cardsTabRenderFlag;
    }    
    
    public void setcardsTabRenderFlag(){
        cardsTabRenderFlag = True;
    }
    public Boolean getpaymentTabRenderFlag(){
        return paymentTabRenderFlag;
    }    
    
    public void setpaymentTabRenderFlag(){
        paymentTabRenderFlag = True;
    }
    public Boolean getsignUpGiftTabRenderFlag(){
        return signUpGiftTabRenderFlag;
    }    
    
    public void setsignUpGiftTabRenderFlag(){
        signUpGiftTabRenderFlag = True;
    }
}
<apex:page standardController="Contact" extensions="threesixtyviewController">
<br/>
  <!-- Begin Default Content REMOVE THIS --> 
  <apex:include pageName="threeSixtyStyle" />
  <apex:tabPanel tabClass="activeTab" inactiveTabClass="inactiveTab" switchtype="client">
      <!-- Begin Default Content REMOVE THIS -->
      <apex:tab label="Biodata" name="Biodata" style="background:white;">
      <apex:include pageName="BioData_v2" />
      </apex:tab>
      <!-- Membership Tab -->
      <apex:tab label="Membership" name="Membership" style="background:white;" onTabEnter="loadMembershipTab()">
      <apex:outputpanel id="membershipTab">
      <apex:include pageName="MembershipTab" rendered="{!membershipTabRenderFlag}"/>
      </apex:outputpanel>
      <apex:form >
                <apex:actionFunction name="loadMembershipTab" action="{!setmembershipTabRenderFlag}" immediate="true" status="LoadingStatus1" rerender="membershipTab"/>
      </apex:form>  
      <apex:actionStatus startText="Loading..." id="LoadingStatus1"/>           
      </apex:tab>    
      <!-- Cards Tab -->
      <apex:tab label="Cards" name="Cards" style="background:white;" ontabenter="loadCardsTab()">
      <apex:outputpanel id="cardsTab">
      <apex:include pageName="CardsTab" rendered="{!cardsTabRenderFlag}"/>
      </apex:outputpanel>
      <apex:form >
                <apex:actionFunction name="loadCardsTab" action="{!setcardsTabRenderFlag}" immediate="true" status="LoadingStatus2" rerender="cardsTab"/>
      </apex:form>  
      <apex:actionStatus startText="Loading..." id="LoadingStatus2"/> 
      </apex:tab>
                    
      <apex:tab label="Payment" name="Payment" style="background:white;" ontabenter="loadPaymentTab()">
      <apex:outputpanel id="paymentTab">
      <apex:include pageName="PaymentTab" rendered="{!paymentTabRenderFlag}"/>
      </apex:outputpanel>
      <apex:form >
                <apex:actionFunction name="loadPaymentTab" action="{!setpaymentTabRenderFlag}" immediate="true" status="LoadingStatus3" rerender="paymentTab"/>
      </apex:form>
      <apex:actionStatus startText="Loading..." id="LoadingStatus3"/>
      </apex:tab>

      <apex:tab label="Signup Gift" name="Signup Gift" style="background:white;" ontabenter="loadSignUpGiftTab()">
      <apex:outputpanel id="signUpGiftTab">
      <apex:include pageName="SignUpGiftTab"  rendered="{!signUpGiftTabRenderFlag}" />
      </apex:outputpanel>
      <apex:form >
                <apex:actionFunction name="loadSignUpGiftTab" action="{!setsignUpGiftTabRenderFlag}" immediate="true" status="LoadingStatus4" rerender="signUpGiftTab"/>
      </apex:form>
      <apex:actionStatus startText="Loading..." id="LoadingStatus4"/>
      </apex:tab>
  </apex:tabPanel>

  <!-- End Default Content REMOVE THIS -->
</apex:page>