Primefaces, JavaScript y JSF no funciona bien juntos o estoy haciendo algo mal

Question

Aquí hay algo tan simple

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

Cuando u clic en el Tom, el foco de texto a conseguir. Bien, ahora probar este

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

al hacer clic no pasa nada, puedo comprobar Firebug, veo

document.getElementById("tom") is null

Cuando intento usar jQuery $('#tom').focus(), no pasa nada, ningún error, pero no consiguió enfoque tampoco. Esta es la response (no estoy seguro si esta es la respuesta del servidor) cuando veo a 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

En JSF, el ID de elementos llevan el prefijo por el ID de la forma que los contiene (más generalmente, su ID se puede anteponer por el ID de todos los componentes de los padres que implementa el NamingContainer interfaz). Por ejemplo:

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

generará el código HTML siguiente:

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

Para acceder a la <input> debe utilizar el ID myForm:tom y no el propio ID tom.

Con jQuery, que tendrá que utilizar $("myForm\:tom").focus();

Answer 2

JSF antepondrá ID de UINamingContainer niños (h:form, h:dataTable , etc) con el ID del propio componente UINamingContainer. Puede desactivar esta estableciendo el atributo prependId a false.

<h:form prependId="false">

Sólo no podrá nunca más para incluir dinámicamente la misma pieza de código en otro lugar en la misma vista. Tenga esto en cuenta cuando se deshabilita esto.

Answer 3

y con Primefaces2, u debe utilizar jQuery en lugar de $, así:

 <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

Es necesario dar esa etiqueta JSF un atributo id, como esto:

<h:inputText id="tom" />

De lo contrario, no se rinde con una id, y lo que no habrá ningún elemento id="tom" de encontrar.

Answer 5

No se olvide que PrimeFaces también vamos utiliza el atributo widgetvar para atar el componente a un objeto JavaScript.

Así, por ejemplo:

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

A continuación, en el código JavaScript o alguna devolución de llamada javascript que podría hacer:

tom.disable()

etc.