Primefaces, JavaScript, and JSF does not work well together or am I doing something wrong

Question

Here is something so simple

<p:commandLink value="Tom" onclick="document.getElementById('tom').focus()"/><br/>
<input id="tom"/>

When u click on the Tom, the textbox get focus. Great, now try this

<p:commandLink value="Tom" onclick="document.getElementById('tom').focus()"/><br/>
<h:inputText id="tom"/> <br/>

when I click nothing happen, I check firebug, I see

document.getElementById("tom") is null

When I try to use jQuery $('#tom').focus(), nothing happen, no error, but did not get focus either. This is the response (not sure if this is the response from the server) when I see from firebug

<?xml version="1.0" encoding="utf-8"?>
<partial-response>
    <changes>
       <update id="javax.faces.ViewState"><![CDATA[455334589763307998:-2971181471269134244]]></update>
    </changes>
    <extension primefacesCallbackParam="validationFailed">{"validationFailed":false}</extension>
</partial-response>

---

Answer 1

In JSF, the ID of elements are prefixed by the ID of the form that contains them (more generally, their ID are prefixed by the ID of all the parent components that implements the NamingContainer interface). For example:

<h:form id="myForm">
    <h:inputText id="tom" .../>

will generate the following HTML code:

<input id="myForm:tom" ...>

To access the <input> you must use the myForm:tom ID and not the tom ID itself.

With jQuery, you will have to use $("myForm\:tom").focus();

Answer 2

JSF will prepend ID's of UINamingContainer children (h:form, h:dataTable, etc) with the ID of the UINamingContainer component itself. You can disable this by setting the prependId attribute to false.

<h:form prependId="false">

You only won't be able anymore to dynamically include the same piece of code somewhere else in the same view. Keep this in mind when disabling this.

Answer 3

and with Primefaces2, u should use jQuery instead of $, like this:

 <h:commandButton id="dome" value="提交" action="#{uInfo.doMe}">
  <f:ajax execute="@form" render="@form"/>
 </h:commandButton>
 ...
 <script type="text/javascript">
 function refresh() {
  jQuery("input#dome").click();
 }
 var t=setInterval('refresh()', 5000);
 </script>

Answer 4

You need to give that JSF tag an id attribute, like this:

<h:inputText id="tom" />

Otherwise it won't render with an id, and so there will be no id="tom" element to find.

Answer 5

Don't forget that primefaces also let's you use the attribute widgetvar to tie your component to a javascript object.

so for instance:

<p:inputText widgetvar="tom" id="tom" />

then in your javascript code or some javascript callback you could do:

tom.disable()

etc.