Primefaces, JavaScript und JSF funktioniert nicht gut zusammen, oder bin ich etwas falsch zu machen

Question

Hier ist etwas so einfaches

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

Wenn u das Tom klicken Sie auf die Textbox get Fokus. Große, versuchen jetzt dieses

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

wenn ich auf nichts passieren, ich Firebug überprüfen, ich sehe

document.getElementById("tom") is null

Wenn ich versuche, jQuery $('#tom').focus() zu verwenden, geschieht nichts, kein Fehler, aber nicht bekommen Fokus entweder. Dies ist der response (nicht sicher, ob dies die Antwort vom Server), wenn ich von Firebug siehe

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

In JSF, die ID der Elemente durch die ID des Formulars Präfix, das sie enthält (allgemeiner ihre ID durch die ID aller übergeordneten Komponenten voran, dass Geräte die NamingContainer Schnittstelle). Zum Beispiel:

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

wird den folgenden HTML-Code generieren:

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

Um die <input> greifen Sie auf die myForm:tom ID verwenden müssen und nicht die tom ID selbst.

Mit jQuery, werden Sie verwenden müssen $("myForm\:tom").focus();

Answer 2

JSF wird prepend IDs von UINamingContainer Kinder (h:form, h:dataTable , usw.) mit der ID der UINamingContainer Komponente selbst. Sie können dies deaktivieren, indem Sie die prependId Attribut false Einstellung.

<h:form prependId="false">

Sie werden nicht nur mehr in der Lage, dynamisch das gleiche Stück Code irgendwo anders in der gleichen Ansicht sind. Beachten Sie dies, wenn diese zu deaktivieren.

Answer 3

und mit Primefaces2, sollte u jQuery statt $ verwenden, wie diese:

 <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

Sie brauchen, dass JSF-Tag Attribut eine id zu geben, wie folgt aus:

<h:inputText id="tom" />

Sonst wird es nicht mit einer id machen, und so wird es kein id="tom" Element zu finden sein.

Answer 5

Sie nicht, dass primefaces vergessen auch die können Sie das Attribut widgetvar benutzen, um Ihre Komponente zu einem JavaScript-Objekt zu binden.

so zum Beispiel:

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

dann in Ihrem JavaScript-Code oder einige Javascript Rückruf Sie tun können:

tom.disable()

etc.