Primefaces, JavaScript e JSF não funcionam bem juntos ou estou fazendo algo errado

Question

Aqui está algo tão simples

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

Quando você clica no TOM, a caixa de texto fica com foco. Ótimo, agora tente isso

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

Quando clico em nada acontecer, eu verifico o Firebug, eu vejo

document.getElementById("tom") is null

Quando tento usar jQuery $('#tom').focus(), nada acontece, nenhum erro, mas também não obteve foco. Isto é o response (não tenho certeza se essa é a resposta do servidor) quando vejo da 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

Na JSF, o ID dos elementos é prefixado pelo ID da forma que os contém (geralmente, seu ID é prefixado pelo ID de todos os componentes pais que implementa o NamingContainer interface). Por exemplo:

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

irá gerar o seguinte código HTML:

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

Para acessar o <input> você deve usar o myForm:tom Id e não o tom Próprio id.

Com jQuery, você terá que usar $("myForm\:tom").focus();

Answer 2

JSF irá prender IDs de UINamingContainer crianças (h:form, h:dataTable, etc) com o ID do UINamingContainer próprio componente. Você pode desativar isso definindo o prependId atribuir a false.

<h:form prependId="false">

Você só não poderá mais incluir dinamicamente o mesmo pedaço de código em outro lugar na mesma visão. Lembre -se disso ao desativar isso.

Answer 3

E com PrimeFaces2, você deve usar o jQuery em vez de $, como este:

 <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

Você precisa dar tag JSF e id atributo, assim:

<h:inputText id="tom" />

Caso contrário, não será renderizado com um id, e assim não haverá id="tom" elemento para encontrar.

Answer 5

Não se esqueça que os PrimeFaces também vamos usar o Widgetvar do Atributo para amarrar seu componente a um objeto JavaScript.

Então, por exemplo:

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

Então, no seu código JavaScript ou em algum retorno de chamada JavaScript que você pode fazer:

tom.disable()

etc.