$Component

A global merge field type to use when referencing a Visualforce component.

Usage

Each component in a Visualforce page has its own Id attribute. When the page is rendered, this attribute is used to generate the Document Object Model (DOM) ID. Use $Component.Path.to.Id in JavaScript to reference a specific component on a page, where Path.to.Id is a component hierarchy specifier for the component being referenced.

Example

The following JavaScript method references a component named msgpost in a Visualforce page:

1function beforeTextSave() {
2    document.getElementById('{!$Component.msgpost}').value = 
3        myEditor.getEditorHTML();
4}

The page markup that follows shows the <apex:outputText> component to which msgpost refers:

1<apex:page>
2    <apex:outputText id="msgpost" value="Emacs"/> is great.
3</apex:page>

If your component is nested, you might need to use a more complete component path specifier. For example, if your page looks like this:

1<apex:page>
2    <apex:pageBlock id="theBlock">
3        <apex:pageBlockSection id="theSection" columns="1">
4            <apex:pageBlockSectionItem id="theSectionItem">
5                <apex:outputText id="theText">
6                    Heya!
7                </apex:outputText>
8            </apex:pageBlockSectionItem>
9        </apex:pageBlockSection>
10    </apex:pageBlock>
11</apex:page>

Then you can refer to the component in a function like this:

1document.getElementById(
2    "{!$Component.theBlock.theSection.theSectionItem.theText}")

See Also