Given the following code:

<apex:page >
        function onload() {
            var elementid = "{!$Component.sectionheader}",
                outputarea = document.getElementById("output"),
                br = document.createElement("br"),
                element = document.getElementById(elementid);
            outputarea.appendChild(document.createTextNode("Section Header ID is: "+elementid));
            outputarea.appendChild(document.createTextNode("Section Header reference is: "+(element?"not null":"null")));
        addEventListener("load", onload, true);
    <apex:sectionHeader title="Test" subtitle="Test" id="sectionheader"/>
    <div id="output"></div>

The page will give you an ID value, but then say the element is null. Furthermore, you can look at the source and visually confirm that there is no ID value for the sectionHeader.

The purpose here is to dynamically update the section header without a roundtrip to the server, so how can I do this dynamically in a method that isn't likely to break when the next big salesforce.com theme comes out?

I have some theories on what I can do, but I'm really looking for a futureproof solution that doesn't depend on element class names or tag names that are beyond my control.

| improve this question | | | | |
  • Interesting how salesforce renders some components. I just encapsulated the <apex:sectionHeader> in a <apex:pageBlock> component and interestingly I didn't get the ID at all.. <apex:pageblock> <apex:sectionHeader title="Test123" subtitle="Test" id="sectionheader"/> </apex:pageblock> – Sam Jul 22 '13 at 16:56

I would guess that because SectionHeader renders a number of HTML tags that the id isn't applied to any of them.

What you can do is wrap your secionheader with an outputPanel and you can then reference that in your JavaScript instead of the sectionHeader itself.


<apex:outputPanel id="sectionheader">
    <apex:SectionHeader title="bob"/>


<span id="j_id0:sectionheader">
   <div class="bPageTitle">
     <div class="ptBody secondaryPalette brandSecondaryBrd">
      <div class="content">
          <img src="/s.gif" class="pageTitleIcon" title="Prospect / Opportunity" alt="Prospect / Opportunity">
          <h1 class="pageType noSecondHeader">bob</h1>
         <div class="blank"></div>
| improve this answer | | | | |

Because of visualforce management of ids to select apex object by an Id you should either use $Component variable or give explicit id to every parent object or use partial id selectors (if you use jQuery) Here you can find some examples and explanation . Alternatively you can use styleClass attribute on apex object and then select by class.

| improve this answer | | | | |
  • The section header doesn't receive a generated ID value, so any concrete query selectors goes right out the door. I've given up on that idea since and decided I'll be rendering my own elements. – sfdcfox Sep 20 '13 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.