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
TrUs3Uw3TrUs3Uw3 

Using JavaScript to Reference Components issue

Regarding Using JavaScript to Reference Components we can get id of a component in JavaScript using

{!$Component.thePanel}

 

Please, imagine that we have next page:

<apex:page >

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

</apex:page>

 What do you think you will get in alert? Right! bla-bla-bla:form01 And I have it. Nice.

 

Next step.

 

Please, imagine:

<apex:page >

	<apex:form id="form01" >
		<apex:pageBlock id="pageBlock02" >
		</apex:pageBlock>
	</apex:form>
	
	<script type="text/javascript">
	
		alert('{!$Component.pageBlock02}');
	
	</script>

</apex:page>

 What do you think you will get in alert? Right! bla-bla-bla:form01:pageBlock02 

If you have it - you are lucky! I don't.

 

Now remove form tag. - bla-bla-bla:pageBlock02

 

WTH? What am I doing wrong?

I want to se bla-bla-bla:form01:pageBlock02

 

 

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
TrUs3Uw3TrUs3Uw3

Here you go! http://www.salesforce.com/us/developer/docs/pages/Content/pages_best_practices_accessing_id.htm

Here we have what I want. Why there it is working???

 

 

<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:inputText id="theTextInput" onclick="alert('
					{!$Component.theTextInput}');"/>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>

 

This works. WTH???

 

OK.

Got it.

 

<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:inputText id="theTextInput" onclick="a('{!$Component.theTextInput}');"/>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
	
	<script type="text/javascript">

		// this alert won't work	
		//alert('{!$Component.theTextInput}');

		// this function will
		function a(textId) {
			alert(textId);
		}
	 
	</script>
</apex:page>

 

All Answers

SurekaSureka

Hi,

 

Try this - alert('{!$Component.form01.pageBlock02}');

 

Thanks
TrUs3Uw3TrUs3Uw3

Hi Sureka,

 

Sorry for wane and miserable example. In a real application it is more complicated. Like:

<apex:page >

	<apex:form id="form01" >
		<apex:pageBlock id="pageBlock02" >
			<apex:pageBlockSection id="thePageBlockSection03" >
                <apex:inputText id="theInputText04" label="Phone number" />
            </apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
	
	<script type="text/javascript">
	
		alert('{!$Component.thePageBlockSection03.theInputText04}');
	
	</script>

</apex:page>

 And it doesn't work. If I put all ids than it works. But it's not really interesting. It worked half a year ago perfectly. Why it isn't working now...

 

And your example works fine. But code above doesn't.
SurekaSureka

Usually only when you put all the ids, it will work.
TrUs3Uw3TrUs3Uw3

As far as I see it, it depends on tag's level. When it is second level - it works fine. But when it is deeper than it doesn't. Like in mine last example where I have 4th level.

...

In more complex example I can see that you are right. But actually, than there are no sence in this $Component stuff...
TrUs3Uw3TrUs3Uw3

Here you go! http://www.salesforce.com/us/developer/docs/pages/Content/pages_best_practices_accessing_id.htm

Here we have what I want. Why there it is working???

 

 

<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:inputText id="theTextInput" onclick="alert('
					{!$Component.theTextInput}');"/>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>

 

This works. WTH???

 

OK.

Got it.

 

<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:inputText id="theTextInput" onclick="a('{!$Component.theTextInput}');"/>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
	
	<script type="text/javascript">

		// this alert won't work	
		//alert('{!$Component.theTextInput}');

		// this function will
		function a(textId) {
			alert(textId);
		}
	 
	</script>
</apex:page>

 

This was selected as the best answer