Primefaces、JavaScript 和 JSF 不能很好地协同工作，或者我做错了什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4038456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Primefaces, JavaScript, and JSF does not work well together or am I doing something wrong
提问by Thang Pham
Here is something so simple
这是一件非常简单的事情
<p:commandLink value="Tom" onclick="document.getElementById('tom').focus()"/><br/>
<input id="tom"/>
When u click on the Tom, the textbox get focus. Great, now try this
当您单击 Tom 时，文本框将获得焦点。太好了，现在试试这个
<p:commandLink value="Tom" onclick="document.getElementById('tom').focus()"/><br/>
<h:inputText id="tom"/> <br/>
when I click nothing happen, I check firebug, I see
当我点击什么都没有发生时，我检查了萤火虫，我明白了
document.getElementById("tom") is null
When I try to use jQuery $('#tom').focus(), nothing happen, no error, but did not get focus either. This is the response(not sure if this is the response from the server) when I see from firebug
当我尝试使用 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>
回答by BalusC
JSF will prepend ID's of UINamingContainerchildren (h:form, h:dataTable, etc) with the ID of the UINamingContainercomponent itself. You can disable this by setting the prependIdattribute to false.
JSF 将在UINamingContainer子组件（h:form、h:dataTable等）的 ID前面加上UINamingContainer组件本身的 ID 。您可以通过将prependId属性设置为 来禁用此功能false。
<h:form prependId="false">
You only won't be able anymore to dynamically include the same piece of code somewhere else in the same view. Keep this in mind when disabling this.
您将无法再在同一视图中的其他位置动态包含同一段代码。禁用此功能时请记住这一点。
回答by Romain Linsolas
In JSF, the ID of elements are prefixed by the ID of the form that contains them (more generally, their ID are prefixed by the ID of all the parent components that implements the NamingContainerinterface). For example:
在 JSF 中，元素的 ID 以包含它们的表单的 ID 为前缀（更一般地，它们的 ID 以实现该NamingContainer接口的所有父组件的 ID 为前缀）。例如：
<h:form id="myForm">
<h:inputText id="tom" .../>
will generate the following HTML code:
将生成以下 HTML 代码：
<input id="myForm:tom" ...>
To access the <input>you must use the myForm:tomID and not the tomID itself.
要访问<input>您必须使用myForm:tomID 而不是tomID 本身。
With jQuery, you will have to use $("myForm\:tom").focus();
使用 jQuery，你将不得不使用 $("myForm\:tom").focus();
回答by quakezh
and with Primefaces2, u should use jQuery instead of $, like this:
对于 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>
回答by arg20
Don't forget that primefaces also let's you use the attribute widgetvar to tie your component to a javascript object.
不要忘记，primefaces 还可以让您使用属性 widgetvar 将您的组件绑定到一个 javascript 对象。
so for instance:
所以例如：
<p:inputText widgetvar="tom" id="tom" />
then in your javascript code or some javascript callback you could do:
然后在您的 javascript 代码或一些 javascript 回调中，您可以执行以下操作：
tom.disable()
etc.
等等。
回答by Nick Craver
You need to give that JSF tag an idattribute, like this:
您需要为该 JSF 标记提供一个id属性，如下所示：
<h:inputText id="tom" />
Otherwise it won't render with an id, and so there will be no id="tom"element to find.
否则它不会用 呈现id，因此将找不到id="tom"元素。
