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

Question

Here is something so simple

Answer 1

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 2

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 3

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 4

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 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.