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
Janno RipJanno Rip 

Prevent reRendering of whole Visualforce Page when changing between <apex:tab>

in my Visualforce page I have created an apex:pageblock that consists of an apex:selectList for sorting and an apex:tabPanel (Leads & Accounts)

User-added imageNow when I switch between these tabs the entire visualforce page reloads which includes a google map. This not what I want and at the same time can't figure out why this is happening. What 'action' tells the page to reRender when switching tabs?

I only want the pageblock to reRender. This behaviour is fine when I change the value of the 'selectList' element in order to sort the records inside the tabs.

Here is the code that handles the pageblock:
 
<apex:pageblock id="sort">
        <apex:form >
            sortieren nach:   <apex:selectList value="{!selectedField}" size="1">
                                 <apex:actionSupport event="onchange" rerender="sort" action="{!findNearbyPotentials}"></apex:actionSupport>
                                    <apex:selectOption itemValue="Distance" itemLabel="Entfernung"/>
                                    <apex:selectOption itemValue="Jobads" itemLabel="Anzahl Anzeigen"/>
                              </apex:selectList>
         </apex:form>


    <apex:tabPanel >
     <!-- TAB LEADS -->
      <apex:tab label="Leads ({!warehouses.size})" disabled="{!IF(warehouses.size = 0,true,false)}" >
       <apex:pageBlockSectionItem >
        <apex:outputPanel styleClass="container-fluid">
         <div style="height:300px; overflow:auto !important;">     
          <apex:repeat value="{!warehouses}" var="war">

             <style type="text/css">
               .col1 {width:5px; text-align:left;}
               .col2 {width:400px; text-align:left;}
             </style>

              <apex:panelGrid columns="2" columnClasses="col1, col2" onmouseover="this.style.backgroundColor='#e2ecf1'" onmouseout="this.style.backgroundColor =''">
                <apex:image url="{!IF(war.Nicht_zugewiesene_Leadevents_Counter__c > 0,URLFOR($Resource.mitle),IF(war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit), 
                      URLFOR($Resource.ms_marker)))}" styleClass="imageStyle" id="MyImage" onmouseover="ImageOver(this)" onmouseout="ImageNormal(this)"/> 
                  <apex:panelGroup >

                                <!-- Hover for Detail -->   
                                <a id="{!war.Id}"
                                onmouseover="LookupHoverDetail.getHover('{!war.Id}', '/{!war.Id}/m?retURL={!war.Id}&isAjaxRequest=1').show();"
                                onmouseout="LookupHoverDetail.getHover('{!war.Id}').hide();"
                                onfocus="LookupHoverDetail.getHover('{!war.Id}', '/{!war.Id}/m?retURL={!war.Id}&isAjaxRequest=1').show();"
                                onblur="LookupHoverDetail.getHover('{!war.Id}').hide();"
                                href="/{!war.Id}" target="_blank"> 
                                {!war.company}
                                 </a> <br/>

                                <!-- Jump to location and highlight -->
                                <apex:form > 
                                 <apex:commandLink action="{!findNearbyPotentials}" value="{!war.Street}, {!war.PostalCode} {!war.City}" reRender="map">  
                                     <apex:param name="HoverLead" value="{!war.id}" assignTo="{!HoverLead}" /> 
                                      <apex:param name="center" value="{!war.MapCurrentAddress__c}" assignTo="{!mapCenter}" />
                                      <apex:param name="zoom" value="13" assignTo="{!zoom}"/>
                                      <apex:param name="HoverAccount" value="" assignTo="{!HoverAccount}" /> 
                                 </apex:commandLink>  
                                </apex:form>  

                                 <!-- Distanz -->
                                 <apex:variable var="url" value="GoogleDistance | https://www.google.com/maps?saddr=+{!currentAccount.Geolocation__c}&daddr=+{!war.Geolocation__c}" />
                                 <apex:outputLink rendered="{!IF(NOT(CONTAINS(selectedField,'Jobads')), true, false)}" value="{!MID(url, FIND('|', url) + 1, LEN(url))}" target="_blank">{!distances[war.id]}</apex:outputLink>  

                                 <!-- Anzahl Anzeigen -->             
                                 <apex:outputLink rendered="{!IF(CONTAINS(selectedField,'Jobads'), true, false)}" value="{!war.indexurl__c}" target="_blank">{!war.AD_MS_Rel_Anzahl_bez__c} Anzeigen</apex:outputLink>                     

                                 <!-- Branche -->     
                                 <br/>          
                                 <apex:outputText value="{!war.WirtschaftszweigWZ08__c}"></apex:outputText>                         

                     </apex:panelGroup>                                                  
                    </apex:panelGrid> 
                   </apex:repeat> 
                  </div>                 
                 </apex:outputpanel> 
                </apex:pageBlockSectionItem>    
               </apex:tab>


    <!-- TAB ACCOUNTS -->
       <apex:tab label="Accounts ({!pot.size})" disabled="{!IF(pot.size = 0,true,false)}" >  
        <apex:pageBlockSectionItem >
         <apex:outputPanel styleClass="container-fluid">
          <div style="height:300px; overflow:auto !important;">     
           <apex:repeat value="{!pot}" var="pote">

                <style type="text/css">
                     .col1 {width:5px; text-align:left;}
                     .col2 {width:400px; text-align:left;}
                </style>

                    <apex:panelGrid columns="2" columnClasses="col1, col2" onmouseover="this.style.backgroundColor='#e2ecf1'" onmouseout="this.style.backgroundColor =''">
                      <apex:image url="{!IF(pote.Nicht_zugewiesene_Leadevents_Counter__c > 0,URLFOR($Resource.mitle),IF(pote.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && pote.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit), 
                      URLFOR($Resource.ms_marker)))}" styleClass="imageStyle" id="MyImage" onmouseover="ImageOver(this)" onmouseout="ImageNormal(this)"/> 
                        <apex:panelGroup >

                               <!-- Hover for Detail -->   
                                <a id="{!pote.Id}"
                                onmouseover="LookupHoverDetail.getHover('{!pote.Id}', '/{!pote.Id}/m?retURL={!pote.Id}&isAjaxRequest=1').show();"
                                onmouseout="LookupHoverDetail.getHover('{!pote.Id}').hide();"
                                onfocus="LookupHoverDetail.getHover('{!pote.Id}', '/{!pote.Id}/m?retURL={!pote.Id}&isAjaxRequest=1').show();"
                                onblur="LookupHoverDetail.getHover('{!pote.Id}').hide();"
                                href="/{!pote.Id}" target="_blank"> 
                                {!pote.Name}
                                </a> 
                                <br/>

                                <!-- Jump to location and highlight -->
                                 <apex:form >  
                                    <apex:commandLink action="{!findNearbyPotentials}" value="{!pote.ShippingStreet}, {!pote.ShippingPostalCode} {!pote.ShippingCity}" reRender="map">  
                                    <apex:param name="HoverAccount" value="{!pote.id}" assignTo="{!HoverAccount}" />
                                    <apex:param name="center" value="{!pote.MapCurrentAddress__c}" assignTo="{!mapCenter}" />
                                    <apex:param name="zoom" value="13" assignTo="{!zoom}"/>
                                    <apex:param name="HoverLead" value="" assignTo="{!HoverLead}" /> 
                                  </apex:commandLink>  
                                 </apex:form>   

                                <!-- Distanz -->
                                <apex:variable var="url" value="GoogleDistance | https://www.google.com/maps?saddr=+{!currentAccount.Geolocation__c}&daddr=+{!pote.Geolocation__c}" />
                                <apex:outputLink rendered="{!IF(NOT(CONTAINS(selectedField,'Jobads')), true, false)}" value="{!MID(url, FIND('|', url) + 1, LEN(url))}" target="_blank">{!distances[pote.id]}</apex:outputLink>  

                                <!-- Anzahl Anzeigen -->             
                                <apex:outputLink rendered="{!IF(CONTAINS(selectedField,'Jobads'), true, false)}" value="{!pote.indexurl__c}" target="_blank">{!pote.AD_MS_Rel_Anzahl_bez__c} Anzeigen</apex:outputLink> 

                                 <!-- Branche -->   
                                 <br/>           
                                 <apex:outputText value="{!pote.WirtschaftszweigWZ08__c}"></apex:outputText>                     

                        </apex:panelGroup>                                               
                       </apex:panelGrid> 
                      </apex:repeat> 
                     </div> 
                    </apex:outputpanel>                             
                   </apex:pageBlockSectionItem>  
                  </apex:tab>     
                 </apex:tabPanel>      

     </apex:pageblock>

 
ShirishaShirisha (Salesforce Developers) 
Hi Janno,

Greetings!

Can you please check the below doc and include the switchType for Tab definition to prevent the re-rendering.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_tabPanel.htm

Kindly let me know if it helps you and close your query by marking it as best answer so that it can help others in the future.

Warm Regards,
Shirisha Pathuri