function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SN SFSN SF 

Data in the VF component disappears on click of Tab

Hello -

I have a VF Page with two Tabs (Tab1 and Tab2 ) , In each tab I am using VF components to display the data . When I initially load the Vf page , it will land on Tab1 .When I click on Tab 2 , it displays the data correctly , but after few seconds the data vanishes (i.e., the data disappears and it displays a blank screen )

Can someone help me on this?

Code Snippet -
<apex:form id="formId"  style="{!if(customStyle != null,if(guMessage == null,'width:100em;border-collapse:collapse;padding-inline-start:-80em;margin-left:-150px;margin-top:-60px;','width:100em;border-collapse:collapse;padding-inline-start:-80em;margin-left:160px;margin-top:60px;'),'width:100%')}" >
        <apex:actionFunction name="callTab1" action="{!tab1}" rerender="PBID"/>
        <apex:actionFunction name="callTab2" action="{!tab2}" rerender="PBID"/> 
        <apex:actionFunction name="refreshPageSize1" action="{!refreshPageSize1}" status="fetchStatus" reRender="" oncomplete="window.scrollTo(0,0);"/>
       <apex:pageBlock id="PBID" rendered="{!$CurrentPage.parameters.id != null && guMessage == null}" >
        <apex:pageMessages id="msg1" ></apex:pageMessages> 
           <apex:outputPanel rendered="{!if(gu == 'us' || gu =='canada' ,true,false)}">
                <apex:tabPanel switchType="client" value="{!selectedTab}"
                               id="AccountTabPanel" tabClass="activeTab" 
                               inactiveTabClass="inactiveTab"  headerSpacing="10"> 
                <apex:tab label="Tab1" name="Tab1Details" id="Tab1ID" style="background-color:white;border:0;font-family: Verdana;" ontabenter="callTab1();" >
                <c:MetricBlockComponent metvalues="{!MetricBlock_Tab1}" > </c:MetricBlockComponent>                           
                </apex:tab>
                    <apex:tab label="Tab2" name="Tab2Details" id="Tab2ID" style="background-color:white;border:0;font-family: Verdana;" ontabenter="callTab2();" >
                  <c:LocalDemoComponent metvalues="{!MetricBlock_Tab2}" > </c:LocalDemoComponent> 
                    </apex:tab>
                   
                </apex:tabPanel>
            </apex:outputPanel>
Abhishek BansalAbhishek Bansal
Hi,

Please use the below updated code. I have just added reRender="test" for the apex:tab tags: 
<apex:form id="formId"  style="{!if(customStyle != null,if(guMessage == null,'width:100em;border-collapse:collapse;padding-inline-start:-80em;margin-left:-150px;margin-top:-60px;','width:100em;border-collapse:collapse;padding-inline-start:-80em;margin-left:160px;margin-top:60px;'),'width:100%')}" >
        <apex:actionFunction name="callTab1" action="{!tab1}" rerender="PBID"/>
        <apex:actionFunction name="callTab2" action="{!tab2}" rerender="PBID"/> 
        <apex:actionFunction name="refreshPageSize1" action="{!refreshPageSize1}" status="fetchStatus" reRender="" oncomplete="window.scrollTo(0,0);"/>
       <apex:pageBlock id="PBID" rendered="{!$CurrentPage.parameters.id != null && guMessage == null}" >
        <apex:pageMessages id="msg1" ></apex:pageMessages> 
           <apex:outputPanel rendered="{!if(gu == 'us' || gu =='canada' ,true,false)}">
                <apex:tabPanel switchType="client" value="{!selectedTab}"
                               id="AccountTabPanel" tabClass="activeTab" 
                               inactiveTabClass="inactiveTab"  headerSpacing="10"> 
                <apex:tab label="Tab1" name="Tab1Details" id="Tab1ID" style="background-color:white;border:0;font-family: Verdana;" ontabenter="callTab1();" reRender="Test">
                <c:MetricBlockComponent metvalues="{!MetricBlock_Tab1}" > </c:MetricBlockComponent>                           
                </apex:tab>
                    <apex:tab label="Tab2" name="Tab2Details" id="Tab2ID" style="background-color:white;border:0;font-family: Verdana;" ontabenter="callTab2();" reRender="Test">
                  <c:LocalDemoComponent metvalues="{!MetricBlock_Tab2}" > </c:LocalDemoComponent> 
                    </apex:tab>
                   
                </apex:tabPanel>
            </apex:outputPanel>

Let me know if this works for you.

Thanks,
Abhishek Bansal.
SN SFSN SF
Hi Abhishek Bansal, 

I tried your code, but it didn't work . Basically the issue I am facing is when I click on tab 2 , the table is rendered correctly , but after few seconds the entire table disappears 

Thanks ,
SN
Abhishek BansalAbhishek Bansal
Yes this is basically due to the reRender of the components from two places. That's why we passed a dummy id for the apex:tab to reRender test which doesn't exist. I was also facing the same issue and this worked for me. Please make sure you are not using reRender from two places in a single call.
If possible please contact me on:
Gmail: abhibansal2790@gmail.com
Skype: abhishek.bansal2790

We can check together in a call.
SN SFSN SF
Thanks Abhishek !

I upate the Switch type to "ajax" on the tab panel and it resolved the issue

Thank you once again for your suggestions !