1

I have a simple form where I need the input box to have the name and id in it.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputText.htm

As the docs says, this: 

<apex:inputText value="{!inputValue}" id="theTextInput"/>

should output as 

<input id="theTextInput" type="text" name="theTextInput" />

but it doesn't, it outputs as:

<input id="j_id0:main-form:theTextInput" type="text" name="j_id0:main-form:theTextInput" />

The form is wrapped in:

<apex:form id="main-form" styleClass="form-horizontal">

Is it possible to prevent that from happening?

Improve this question
1

4 Answers 4

Reset to default
3

You should have added this recent update as an edit or comment to your question, not as an answer ;)

The gibberish is there to make sure elements are unique. Id field - because Ids should be unique, duh. Name - to make sure submitted form is deserialized properly (if you'd have a table with several items & mass edit capability you'd want to make sure that 7th element's Name field is mapped correctly).

Easiest way around it is to use your own input field instead of <apex:...> tag. If that's not an option - you could reference it with jQuery as $("page\\:block\\:form\\:theInput") (fully specified path + escaping).

Or use the ends-with selector: $("input[id$='theInput']")

Improve this answer
4
  • Thank you for the detailed explanation. Not to go to far off topic ... do find this method better than using {!$Component.formName.theTextInput} or would you see them as equal? Thanks!
    – Brian
    Commented Jan 8, 2013 at 16:42
  • I don't like $Component, the guy is a bit clunky IMHO. Code that uses it has to sit next to the tag it refers to and I prefer to not sprinkle my JS all over the place but have it in one block on the bottom of the page... But that's a personal pref. really. "Ends-with" might be slow on bigger pages, explicit path will be always fastest but a bit painful if you rearrange the page heavily... Pick your poison ;)
    – eyescream
    Commented Jan 8, 2013 at 16:46
  • @eyescream, the note of $Component needing to sit next to the tag (a sibling) is inaccurate. If the $Component reference is used outside of a VF tag hierarchy it simply must be fully qualified in order to retrieve the element id. Using the 1st example: Best Practices for Accessing Ids script anywhere in the page: <script> var elId = '{!$Component.theForm.thePageBlock.theSection.theSectionItem.yourInputFieldIdHere}'; var $myInput = jQuery("[id='" + elId + "']"); </script> (and is not escaped)
    – Mark Pond
    Commented Jan 8, 2013 at 18:11
  • @MarkPond thx for the tip! I remember playing with it in the past and it was tricky to use so I gave up on $Component. Will retry next time I need JS :) I agree, having the path to be "calculated" server-side will mean less problems like this escaping required by jQuery.
    – eyescream
    Commented Jan 9, 2013 at 7:30
4

I have figure out how to solve for this in my custom jquery error checking. I just need to reference the name or id as {!$Component.formName.theTextInput}

Note this needs to be run after the field has been rendered to show up.

Improve this answer
2

Have you seen this post:

http://th3silverlining.com/2011/06/24/salesforce-a-better-way-to-work-with-visualforce-component-ids-and-javascript/

Might provide you with an answer.

Improve this answer
1

Not as far as I know. That gibberish it adds in there is used by Salesforce, likely for binding, styling and scripting.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .