jquery - Primefaces, JavaScript, and JSF does not work well together or am I doing something wrong - Stack Overflow

admin管理员组

文章数量:1395408

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

<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

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

---

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

<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

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

---

• javascript
• jquery
• jsf
• primefaces

Share Improve this question Follow edited Oct 28, 2010 at 1:43 Thang Pham asked Oct 27, 2010 at 23:08 Thang PhamThang Pham 38.7k7979 gold badges208208 silver badges289289 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

JSF will prepend ID's of UINamingContainer children (h:form, h:dataTable, etc) with the ID of the UINamingContainer component itself. You can disable this by setting the prependId attribute to 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.

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 NamingContainer interface). For example:

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

will generate the following HTML code:

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

To access the <input> you must use the myForm:tom ID and not the tom ID itself.

With jQuery, you will have to use $("myForm\:tom").focus();

and with Primefaces2, u should use jQuery instead of $, like this:

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

You need to give that JSF tag an id attribute, like this:

<h:inputText id="tom" />

Otherwise it won't render with an id, and so there will be no id="tom" element to find.

Don't forget that primefaces also let's you use the attribute widgetvar to tie your component to a javascript object.

so for instance:

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

then in your javascript code or some javascript callback you could do:

tom.disable()

etc.

本文标签：