primefaces événement keyup retard
j'ai quelque chose comme:
<p:inputText...>
<p:ajax event="keyup" update="somefield" listener="#{someBean.doSomething}"/>
</p:inputText>
mais je ne veux pas faire une demande Ajax sur chaque touche, je voudrais faire la demande une demi-seconde après que l'Utilisateur a arrêté d'écrire.
j'ai vu ce problème résolu à jQuery dans une autre question: Comment retarder l' .keyup () handler jusqu'à ce que l'utilisateur cesse de taper?
je voudrais savoir si il est possible de le faire sur primefaces ou comment adapter le solution de la question jQuery.
J'utilise PrimeFaces 3.0.M4.
Je vous remercie à l'avance.
4 réponses
pourquoi n'utilisez-vous pas le composant RemoteCommand ?
il vous donne une fonction Javascript globale, que vous pouvez appeler de n'importe où quand vous voulez. Et il vous permet d'appeler la méthode managed-bean et il a l'attribut update pour la mise à jour partielle.
<p:inputText id="input" />
<h:form>
<p:remoteCommand name="sendAjaxical" update="somefield" action="#{someBean.doSomething}"/>
</h:form>
Registre gestionnaire d'événements, j'ai emprunté ce qui suit de la même réponse que vous avez posté :
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
jQuery("#input").keyup(function() {
delay(function() { sendAjaxical(); }, 2000); //sendAjaxical is the name of remote-command
});
si vous utilisez Primefaces 5.x, il y a un attribut delay dans la balise p:ajax à cette fin. Alors c'est fait comme ça:
<p:inputText...>
<p:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}"
update="somefield" process="@this" />
</p:inputText>
si ce n'est pas le cas, vous pouvez le réaliser en utilisant f:ajax au lieu de p:ajax (Oui, cela fonctionne aussi avec p:inputText ). f:ajax a ajouté le support pour contrôle de file d'attente à partir de JSF 2.2. Donc le code ressemble à:
<p:inputText...>
<f:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}"
render="somefield" execute="@this" />
</p:inputText>
Voir aussi:
vous ne pouvez pas utiliser le composant Ajax Primefaces, si vous avez choisi la solution jQuery/javascript. Vous devez implémenter votre propre fonction javascript (avec le support ajax/xmlHttpRequest ) et activer cette fonction après une demi-seconde.
mais il y a une autre solution, une solution de contournement: vous pouvez utiliser un autocomplete component et utiliser 3 attributs utiles: valueChangeListener ( A method expression that refers to a method for
handling a valuchangeevent - vous utilisez cela au lieu de completeMethod parce que vous n'avez pas besoin des suggestions de retour), queryDelay ( Delay to wait in milliseconds before sending
each query to the server ) et minQueryLength ( Number of characters to be typed before starting
to query - si vous ne voulez pas démarrer la requête ajax après seulement un caractère tapé).
j'espère que vous trouverez cette solution calme intéressantes...S'il vous plaît voir la composante autocomplete en action ici( http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf ) et vous pouvez pour en savoir plus, consultez le guide de L'utilisateur Primefaces pour 3.0.M4.
un piratage rapide ajouterait un retard dans onstart du p:ajax . Définissez la fonction suivante quelque part dans votre javascript:
function keyupDelay(request, cfg, delay) {
delay = delay || 2000;// if no delay supplied, two seconds are the default seconds between ajax requests
setTimeout(function() {
cfg.onstart = null;
request.send(cfg)
}, delay);
return false;
}
fondamentalement cette fonction déclenche la requête ajax dans un certain délai tout en retournant false pour l'immédiat, et en vidant l'onstart sur cette requête timedout afin de ne pas rester coincé dans une boucle désagréable.
puis sur le p:ajax :
<p:ajax event="keyup" onstart="return keyupDelay(this, cfg)" />
le le paramètre delay est optionnel ici, par défaut il est de 2 secondes.