Primefaces, JavaScript et JSF ne fonctionne pas bien ensemble ou que je fais quelque chose de mal

Question

Voici quelque chose si simple

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

Lorsque u cliquez sur Tom, la mise au point get textbox. Grand, maintenant essayer cette

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

quand je clique sur rien ne se passe, je vérifie Firebug, je vois

document.getElementById("tom") is null

Lorsque je tente d'utiliser jQuery $('#tom').focus(), rien ne se passe, pas d'erreur, mais n'a pas obtenu soit mise au point. Ceci est le response (pas sûr si cela est la réponse du serveur) quand je vois de 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

Dans JSF, l'ID d'éléments sont préfixés par l'ID de la forme qui les contient (plus généralement, leur carte d'identité sont préfixés par l'ID de tous les composants parent qui implémente le NamingContainer interface). Par exemple:

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

va générer le code HTML suivant:

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

Pour accéder au <input> vous devez utiliser l'ID myForm:tom et non l'ID tom lui-même.

Avec jQuery, vous devrez utiliser $("myForm\:tom").focus();

Answer 2

JSF préfixer ID de des enfants UINamingContainer (h:form, h:dataTable , etc.) avec l'identifiant du composant UINamingContainer lui-même. Vous pouvez désactiver cette fonctionnalité en définissant l'attribut prependId à false.

<h:form prependId="false">

Vous ne sera pas en mesure d'inclure plus dynamiquement le même morceau de code quelque part ailleurs dans le même point de vue. Gardez cela à l'esprit lors de la désactivation de cette.

Answer 3

et Primefaces2, u devrait utiliser au lieu de jQuery $, comme ceci:

 <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

Vous devez donner cette balise JSF un attribut id, comme ceci:

<h:inputText id="tom" />

Dans le cas contraire, il ne sera pas rendu avec un id, et donc il n'y aura pas d'élément id="tom" à trouver.

Answer 5

Ne pas oublier que primefaces laisser aussi de vous utilisez le widgetvar d'attribut pour attacher votre composant à un objet javascript.

par exemple:

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

puis dans votre code javascript ou un rappel javascript vous pouvez faire:

tom.disable()

etc.