Primefaces, JavaScript и JSF плохо работают вместе или я делаю что-то не так

Question

Вот что-то такое простое

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

Когда вы нажимаете на Тома, текстовое поле получает фокус. Отлично, теперь попробуйте это

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

когда я нажимаю, ничего не происходит, я проверяю firebug, я вижу

document.getElementById("tom") is null

Когда я пытаюсь использовать jQuery $('#tom').focus(), ничего не происходит, нет ошибки, но фокус тоже не получается. Это response (не уверен, если это ответ от сервера), когда я вижу из 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

JSF будет добавлять идентификаторы UINamingContainer потомков (h:form, h:dataTable и т. Д.) К идентификатору самого компонента UINamingContainer.Вы можете отключить это, установив для атрибута prependId значение false.

<h:form prependId="false">

Вы больше не сможете динамически включать тот же фрагмент кода где-либо еще в том же виде.Имейте это в виду при отключении этого.

Answer 2

В JSF к идентификатору элементов предшествует идентификатор формы, в которой они содержатся (в более общем случае к их идентификатору добавляется идентификатор всех родительских компонентов, реализующих интерфейс NamingContainer).Например:

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

сгенерирует следующий HTML-код:

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

Для доступа к <input> необходимо использовать идентификатор myForm:tom, а не сам идентификатор tom.

С jQuery вам придется использовать $("myForm\:tom").focus();

Answer 3

и с Primefaces2 вы должны использовать jQuery вместо $, например:

 <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

Не забывайте, что простые лица также позволяют использовать атрибут widgetvar, чтобы связать ваш компонент с объектом javascript.

так, например:

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

затем в вашем коде JavaScript или некотором обратном вызове JavaScript вы можете сделать:

tom.disable()

и т.д.

Answer 5

Вам нужно присвоить этому тегу JSF атрибут id, например:

<h:inputText id="tom" />

В противном случае он не будет визуализироваться с id, поэтому элемент id="tom" не будетнайти.