How to get element from javascript in JSF 2.0

Question

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?

Answer 1

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.

Answer 2

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 component 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 component than your browser generates that dynamically. So don't forget to provide ids to components.

Answer 3

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.

Answer 4

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

Answer 5

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.com/attribute-contains-selector/