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

当我点击什么也没发生时，我检查萤火虫，我明白了

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 中，元素的 ID 以包含它们的表单的 ID 为前缀（更一般地，它们的 ID 以实现该元素的所有父组件的 ID 为前缀） 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的ID的等）与所述UINamingContainer组件本身的ID。可以通过将prependId属性设置为false禁用此。

<h:form prependId="false">

您仅将不能够再动态包含在相同的视图中的相同的代码在其他地方。禁用此时要记住这一点。

Answer 3

和与Primefaces2，U应该使用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也让您使用属性widgetvar到您的组件绑在JavaScript对象。

所以例如：

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

然后在你的JavaScript代码或一些JavaScript回调，你可以这样做：

tom.disable()

等