You need to sign in to do that
Don't have an account?

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>