Rerendering Visualforce apex:sectionHeader

You would think you could rerender a sectionHeader component by referring to its id, just like other Visualforce components. Turns out this is not true as of V32

Here is a controller and VF page that tries to rerender an apex:sectionheader by inserting the selectedItem from an apex:selectlist.

public with sharing class FooController {
    // For demonstration of sectionHeader rerender issue
  public List<SelectOption> optionList {
        get { return new List<SelectOption> {
           new SelectOption('option1','option1'),
           new SelectOption('option2','option2')};}
        private set;                                                      
    }
  public String selectedOption {get; set;}
}
<apex:page controller="FooController">
    
    <apex:sectionHeader title="My Title: {!selectedOption}" 
          description="sectionheaderNotInDiv." id="sectionHdrNoDiv"/>
    <apex:outputPanel  layout="block" id="sectionHdrInDiv">
        <apex:sectionHeader title="My Title: {!selectedOption}" 
          description="sectionheaderInDiv."/>	
    </apex:outputPanel>
    <apex:form>
    	<apex:pageBlock>
            <apex:selectList label="choose something" 
                             value="{!selectedOption}" size="1">
               <apex:actionSupport event="onchange" 
                   rerender="sectionHdrNoDiv,sectionHdrInDiv"/>
               <apex:selectOptions value="{!optionList}"/>
            </apex:selectList>
        </apex:pageBlock>
    </apex:form>
    
</apex:page>

Initial page state
sectionHdrRerender1

Choose an option so onchange event occurs and rerender ensues
sectionHdrRender2

And the result
Only the sectionheader inside a div is rerendered even though both ids are specified in the rerender
sectionHdrRerender3

Analysis
Using Chrome Developer Tools, I inspected the HTML for the first apex:sectionHeader.

<div class="bPageTitle">
 <div class="ptBody secondaryPalette brandSecondaryBrd">
  <div class="content">
   <img src="/s.gif" class="pageTitleIcon" title="Home" alt="Home">
   <h1 class="pageType noSecondHeader">My Title: </h1>
   <div class="blank"></div>
  </div>
 </div>
</div>

And, what do you know, despite specifying an id on the first apex:sectionHeader, SFDC doesn’t add it to any generated HTML. No wonder it doesn’t rerender!

Leave a Reply

Your email address will not be published. Required fields are marked *