function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
James L.James L. 

Can not get element ID by $Component in Javascript

In my code stuff below, ID mapped from $Component.xxx is always blank in Javascript.
I tried all the below options. none of them worked
alert('{!$Component.studentName}')
alert('"{!$Component.studentName}"')

however it's mapped correctly in Visualforce code stuff, like
<apex:outputLabel value="{!$Component.studentName}"/>

any idea how to use $Component.xxx correctly in Javascript?

here's the sample code

 

<apex:page controller="LearnWebService1">
<apex:form >
<apex:pageblock >
<apex:messages />
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel value="{!$Component.studentName}"/> <apex:inputText id="studentName"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton value="Create Through Ajax Call" onclick="alert('{!$Component.studentName}')"/>
</apex:pageBlockButtons>
</apex:pageblock>
</apex:form>
</apex:page>

 

ShaTShaT

Hi ,

 

you can get elements id in java script  by using 

function test(){

var a = document.getElementById('{!$component.formId.demo}');

alert(a);

 

}

<apex:page>

<apex:form id="formId">

<apex:pageblock >

<apex:outputLabel id="demo"/>

 

<apex:pageBlockButtons >
<apex:commandButton value="testjavascript" onclick="test()"/>
</apex:pageBlockButtons>
</apex:pageblock>



</apex:form>

</apex:page>

 

Thanks

Shailu

 
James L.James L.

Appending all parents' id does work, like $Component.form.pageblock........myinput.

 

Just wonder if there's any other simple way, since it does work in Visualforce page like $Component.myinput
James L.James L.

Found one explanation.

As long as the VF element is wrapped in either in "apex:form" or "apex:pageblock",

the  $Component.xxx fails to work.

 


Here's a working example

<apex:page >
  <script type="text/javascript">
          alert('{!$Component.theLabel}');
  </script>

          <apex:outputPanel id="thePanel">
              <apex:outputlabel id="theLabel"> The label </apex:outputlabel>
          </apex:outputPanel>
</apex:page>

 


Here's an example not working

 

 

 

<apex:page >
  <script type="text/javascript">
          alert('{!$Component.theLabel}');
  </script>
  <apex:pageBlock >
      <apex:form id="theForm">
          <apex:outputPanel id="thePanel">
              <apex:outputlabel id="theLabel"> The label </apex:outputlabel>
          </apex:outputPanel>
      </apex:form>
  </apex:pageBlock>    
</apex:page>

 

 

 

 
James KentJames Kent

If you use jQuery, you can use a selector matcher to get the ID:

 

this:

 

{!$Component.theForm.pgBlock.blockAgreementDate.x.contractDurationValue}

 

can be converted into 

 

j$ = jQuery.noConflict();

j$('input[id$=contractDurationValue]')

 

Putting a $ after the id means the id must end  in ...

 

---

 

Extract from http://stackoverflow.com/questions/1487792/jquery-find-element-whose-id-has-a-particular-pattern

 

There are 3 built-in attribute selectors for simple patterns:

$("span[id^=foo]")

That selector matches all spans that have an id attribute and it starts with foo (e.g. fooblah)

$("span[id$=foo]")

That selector matches all spans that have an id attribute and it ends with foo (e.g. blahfoo).

$("span[id*=foo]")

That selector matches all spans that have an id attribute and it has foo somewhere within in it (e.g.blahfooblah).