Accessing Component IDs:

Accessing Component IDs:

To refer to a Visualforce component in JavaScript or another Web-enabled language you must specify a value for the id attribute for that component. A DOM id is constructed from a combination of the id attribute of the component, and the id attributes of all components that contain the element. This ensures every element has a unique DOM id.

The $Component global variable simplifies references and reduces some of the dependency on the overall page structure. For example, to access a data table with id="tableID"contained in a page block with id="blockID", use the following expression: $Component.blockID.tableID.

You don't need to specify an ID for a component you want to access if it is an ancestor or sibling to the $Component variable in the Visualforce component hierarchy. The system dynamically assigns IDs to the outer components and automatically determines the hierarchy for you.

<apex:page>

  <apex:form id="theForm">

    <apex:pageBlock id="thePageBlock">

      <apex:pageBlockSection id="theSection">

        <apex:pageBlockSectionItem id="theSectionItem">All the

        alerts refer to this component</apex:pageBlockSectionItem>

        <!-- Works because this outputPanel has a direct parent 

             with a "theSectionItem" child --> 

    

        <apex:outputPanel onclick="alert('

 {!$Component.theSectionItem}');">

            First click here

        </apex:outputPanel>

      </apex:pageBlockSection>

      <apex:pageBlockButtons id="theButtons" location="bottom">

        <!-- Works because this outputPanel has a grandparent ("theSection")

             with a "theSectionItem" child --> 

    

        <apex:outputPanel onclick="alert('

 {!$Component.theSection.theSectionItem}');">

            Second click here<br />

        </apex:outputPanel>

        <!-- Works because this outputPanel has a distant parent 

             with a "theForm" child. --> 

    

        <apex:outputPanel onclick="alert('

 {!$Component.theForm.thePageBlock.theSection.theSectionItem}');">

            Third click here<br />

        </apex:outputPanel>

      </apex:pageBlockButtons>

    </apex:pageBlock>

    <!-- $Component will reference the common parent of this usage 

         and the target, which is "theForm" --> 

    

    <apex:outputPanel onclick="alert('

 {!$Component.thePageBlock.theSection.theSectionItem}');">

        Fourth click here</apex:outputPanel>

  </apex:form>

</apex:page>