I have JSF code like:

<h:inputText id="from" value="#{fromToMBean.fromName}"/>

I would like to get this element from JavaScript by ID (from), but I can't, because in generated HTML it is j_idt8:from

How can I get this element in e.g. jQuery? Is there any way to force JSF2 not to change ids?

I have JSF code like:

<h:inputText id="from" value="#{fromToMBean.fromName}"/>

I would like to get this element from JavaScript by ID (from), but I can't, because in generated HTML it is j_idt8:from

How can I get this element in e.g. jQuery? Is there any way to force JSF2 not to change ids?

• javascript
• jsf-2

• I've answered this question here. – ftravers Commented May 20, 2011 at 7:13
• possible duplicate of How to select PrimeFaces UI or JSF ponents using jQuery? – BalusC Commented Nov 28, 2012 at 13:40

5 Answers 5

You can either use a custom class which you only assign to this element and use css selectors or assign an id to the form and get the element with the id formid:from.

Is there any way to force JSF2 not to change ids?

You can set prependId="false" This way in generated HTML it will be from in place of j_idt8:from.

prependId : Flag indicating whether or not this form should prepend its id to its descendent's id during the clientId generation process. If this flag is not set, the default value is true.

How can I get this element in e.g. jQuery?

You can use ancestorComponent:from in jQuery to get this element.

Actually j_idt8 in j_idt8:from is auto generated id of ancestor ponent of your <h:inputText/>

for example

<h:form id="form">
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
</h:form>

Now generated id of input text would be form:from

If you don't provide id to a ponent than your browser generates that dynamically. So don't forget to provide ids to ponents.

In JSF 1.2 you can use forceId="true". I'm not sure if you can use t:input in JSF 2, but you should be able to. Then it's ID in HTML will be what you expect.

In order to achieve full ID for a ponent, use EL implicit objects and their properties such as #{cc.clientId} and #{ponent.clientId}. Source: Acquire full prefix for a ponent clientId inside naming containers with JSF 2.0.

You can use jquery. Simply, use a selector defining the text it should contains. Something like this:

$( "input[name*='from']" )

'*=' is used to say that the name attribute contains some string. Also there exist '~=' with similar meaning.

For detailed explanations and examples visit http://api.jquery./attribute-contains-selector/