Find your content:

Search form

You are here

Cannot get the global variable $Component to return id


How can I get the generated id from the $Component global varible for me apex:selectRadio component?


var rdo = j("input[@id=" + jq('{!$Component.searchRdo}') + "]:checked").val();

Visualforce Page

<apex:composition template="FindYourPlaceSiteTemplate">
        <apex:define name="body">

            <apex:form id="form">
                <apex:pageMessages />
                <div class="tabs">        
                        <li><a href="#campusMinistry">{!$Label.FYPTabCollegiateMin}</a></li>
                        <li><a href="#schoolSCU">{!$Label.FYPTabUMSchools}</a></li>
                        <li><a href="#schoolWMC">{!$Label.FYPTabWorldMethodist}</a></li>

                    <div id="campusMinistry">
                                <td valign="top"><label for="institution_autocomplete">{!$Label.FYPSearch}: </label></td>
                                    <input id="institution_autocomplete" maxlength="50" size="50" />
                                    <apex:selectRadio value="{!searchOption}">
                                        <apex:selectOptions id="searchRdo" value="{!searchOptions}"/>
                                    <p style="font-size: small">{!$Label.FYPSearchByInst}</p>

My page source always ends up looking like this:

var rdo = j("input[@id=" + jq('') + "]:checked").val();

Attribution to: fourq

Possible Suggestion/Solution #1

Since it looks like you are already using jQuery, try partial selectors:

Attribution to: joshbirk

Possible Suggestion/Solution #2

UPDATE: Read this blog spot, maybe it can help you: Element ID in JQuery – Visualforce problem

The point here is, that the component must be rendered at time you are reading these id.

Example: here we are reading the id of component that was rendered before the javascript. And it work.

<apex:outputText value="myText" id="textField" />

    var id = '{!$Component.textField}';

Next example will not work, because the component does not exist at the time of reading the id.

    var id = '{!$Component.textField}';

<apex:outputText value="myText" id="textField" />

I recommend jQuery for reading id's:

<apex:outputText value="myText" id="textField" />


Here we take the DOM object with id that ends with 'textField'.

Attribution to: Sergej Utko

Possible Suggestion/Solution #3

You could try using an increment + listener:


<li class="item" data-number="' + (gmarkers.length - 1) + '">

HTML Source

<div class="panel-search-result" data-panel="search-result" style="height: 564px;">
<h1 class="head">Search Results</h1>
<div data-placeholder="result">
    <ul class="search-result-list">
        <li class="item" data-number="0">
            <h2 class="name">ALLERGY TESTING CENTER</h2>
            <div class="address">30 NEWBRIDGE RD<br>EAST MEADOW NY, 11554</div>
            <div class="phone">5167315740</div>


var $searchResult = $("[data-panel='search-result']");

  click: function(event) {
        var i = $(this).data('number');
        infoBox.setContent(gmarkers[i].desc);, gmarkers[i]);
}, "li");

Attribution to: tsalb

Possible Suggestion/Solution #4

I was able to get the component id to render properly by making the request within the same context of Visualforce code.

For example, I have had success by assigning the id to a variable immediately in JavaScript:

<apex:selectRadio value="{!searchOption}">
  <apex:selectOptions id="searchRdo" value="{!searchOptions}"/>
  var searchId = '{!$Component.searchRdo}';

Attribution to: Brad Ullery

Possible Suggestion/Solution #5

Your ID should be defined on the apex:selectRadio tag so that the option elements all have the same element name value, not defined on the apex:selectOptions tag. You will be using the name attribute to find the selected element in the named group.

The $Component reference knows only about its ancestors and siblings within the VisualForce hierarchy. Using the $Component reference outside of VF any tags, in a head script block for instance, requires you to define the full hierarchy path to the element which you are targeting.

Because your question contains a partial VF page, you may need to experiment with this a bit to get the path hierarchy correct in your specific scenario but I assure you it does work. Since your apex:selectRadio 'searchRdo' element is defined within the apex:form tag with an ID of 'form', the full path to the component will look something like this:

(please note that I also modified the original jQuery selector to use the name attribute to find the checked element in the option collection)

var rdo = j("input[name=" + jq('{!$Component.form.searchRdo}') + "]:checked").val();

See this SalesForce Best Practices page for more information about the ancestor and sibling references in the component hierarchy: Best Practices for Accessing Component IDs

Here is a trivial example:

<apex:page controller="YourControllerName">
    var optionsGroupName = '{!$Component.theForm.searchRdo}';

    // after jQuery is loaded and page is rendered
    // console.log(jQuery('[name="' + optionsGroupName + '"]:checked'));

    <apex:form id="theForm">
        <apex:selectRadio value="{!selectedOption}" id="searchRdo">
            <apex:selectOptions value="{!availableOptions}" />

Hope this helps!

Attribution to: Mark Pond
This content is remixed from stackoverflow or stackexchange. Please visit

My Block Status

My Block Content