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>
Choose an option so onchange event occurs and rerender ensues
And the result
Only the sectionheader inside a div is rerendered even though both ids are specified in the rerender
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!