1

I am actually trying to get the associated label of a apex input tag to do some javascript validations. Here are my tags below:

<apex:outputlabel value="Account" for="NewContactAccountSelect" />
<apex:inputField id="NewContactAccountSelect" value="{!mergeField}" /> 
<apex:outputlabel value="Last Name" for="NewContactLastName" />
<input type="text" id="NewContactLastName" />
<!-- Other code -->

and there are like mix of HTML input tags and apex:input Tags. I have tried something using jQuery:

var RequiredFields = [];
var NewContactAccountSelect = jQuery("[id$=NewContactAccountSelect]");
var NewContactLastName = jQuery("[id$=NewContactLastName]");
RequiredFields.push(NewContactAccountSelect );
RequiredFields.push(NewContactLastName);

// And to retrive the label for it, I used:

jQuery(RequiredFields).each(function(index,field)
{ 
  jQuery("label[for$="+jQuery(field).attr('id')+"]").html().trim();
  //other code to do validation.
}  

However,jQuery(NewContactAccountSelect).attr('id') will not retrieve the exact Id (since, it included the partial Ids as well) for visualforce tags and throws me the following error.

Uncaught Error: Syntax error, unrecognized expression: label[for$=j_id0:j_id106:j_id107:j_id108:j_id117:newContactForm:NewContactAccountSelect]

Any help to get the label of that inputField tag?

Also, another question: Is it possible to remove the partialId's added by salesforce and get the actual Id of form element by using javascript, jQuery etc..,?

  • can't you just use jQuery("label[for$="NewContactAccountSelect"]").html().trim(); ? Just a thought – javanoob Aug 20 '15 at 20:08
  • I expected your question and I updated my actual question. – sam_s Aug 20 '15 at 20:12
  • Can you explain what you mean by "partial id" in your question? Are you referring to the j_idN: values in the rendered element id attributes? – Mark Pond Aug 20 '15 at 21:45
  • @MarkPond Yes, Mark. The DOM Id's added by salesforce through out the hierarchy when we don't specify externally by Id attribute. – sam_s Aug 20 '15 at 21:52
  • 1
    It is more efficient and less likely to cause false positives if you use a class selector. – Adrian Larson Aug 21 '15 at 4:03
3

You need quotes around the DOM id value in the for attribute selector. You also do not need the $ to apply 'ends with' selector matching, you already know the exact id value of the field being targeted and can use it directly.

You have this:

jQuery("label[for$=" + jQuery(field).attr('id') + "]")

instead you want do this (note the single quotes and the dropped $ modifier):

jQuery("label[for='" + jQuery(field).attr('id') + "']")

which would evaluate like this at runtime and match the label:
(presuming the label actually has a for attribute on it with this value)

jQuery("label[for='j_id0:j_id106:j_id107:j_id108:j_id117:newContactForm:NewContactAccountSelect']")

Somewhat related, if you add ids to all of the <apex: tags in your page, you can gain a slightly better looking element id hierarchy - if that is important to you. For example, if you give the <apex:page tag an id="thePage", the first node in the element id value would be thePage instead of j_id0.


Also, another question: Is it possible to remove the partialId's added by salesforce and get the actual Id of form element by using javascript, jQuery etc..,?

There is no such thing as a partial ID. Element id values are supposed to be unique in the page. In order to accomplish this when VF renders HTML, the hierarchy of tags in the page are evaluated and the id value of the DOM element is constructed in a way that guarantees uniqueness.

It looks like you have learned about the 'ends with' $ selector modifier but if you want to output the a DOM id value using a VF-native feature, you can do so with the $Component global function. This will render out the DOM ID of the component into the page.

For instance, if you were to add alert('{!$Component.NewContactAccountSelect}'); to your VF markup and you did it someplace where the renderer could find that component in the hierarchy, in your page source you would see alert('j_id0:j_id106:j_id107:j_id108:j_id117:newContactForm:NewContactAccountSelect'); and have an alert popped with that string value in it.

If $Component.NewContactAccountSelect couldn't be found in the hierarchy, you'll just get an empty string there in the alert.

Documentation about best practices for referencing component ids in JavaScript: https://developer.salesforce.com/docs/atlas.en-us.salesforce1api.meta/salesforce1api/pages_best_practices_accessing_id.htm

1

Use this:

jQuery("[id$='NewContactAccountSelect']");

To get labels Id use this:

jQuery( "label" ).each(function( i ) {
  console.log( (i+1) + ": ID: " + $( this ).attr('id') );
});
1

From you code it seems you have used newContactForm as the form id. So you can use the following expression to get the input field. Hope this helps. If not please post a little bit more code snippet showing the complete DOM structure.

var NewContactAccountSelect = document.getElementById("{!$Component.newContactForm.NewContactAccountSelect}");

More details here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.