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

Question

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

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

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

<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 идентификатор элементов префиксирован идентификатором формы, который содержит их (в более общем случае, их идентификатор префиксирован идентификатором всех родительских компонентов, которые реализуют NamingContainer интерфейс). Например:

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

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

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

К доступу <input> Вы должны использовать myForm:tom ID, а не tom Идентификатор сам.

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

Answer 2

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

<h:form prependId="false">

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

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

Вам нужно дать этот меток JSF id Атрибут, как это:

<h:inputText id="tom" />

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

Answer 5

Не забывайте, что Primefaces также давайте использовать VidgetVar атрибута, чтобы привязать свой компонент на объект JavaScript.

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

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

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

tom.disable()

и т.п.