primefaces keyup ou autre retard d'événement ajax

Question

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 requête Ajax à chaque pression de touche, j'aimerais faire la requête une demi-seconde après que l'utilisateur ait cessé d'écrire.

J'ai vu ce problème résolu avec jQuery dans une autre question : Comment retarder le gestionnaire .keyup() jusqu'à ce que l'utilisateur arrête de taper ?

J'aimerais savoir s'il est possible de faire cela sur primefaces ou comment adapter la solution de la question sur jQuery.
J'utilise PrimeFaces 3.0.M4.
Je vous remercie d'avance.

Answer 1

Si vous utilisez Primefaces 5.x, il y a une fonction delay dans l'attribut p:ajax à cette fin. Voici comment procéder :

<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 y parvenir en utilisant f:ajax au lieu de p:ajax (oui, cela fonctionne avec p:inputText ). f:ajax a ajouté la prise en charge des contrôle des files d'attente à partir de JSF 2.2. Le code ressemble donc à ceci :

<p:inputText...>
    <f:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}"
        render="somefield" execute="@this" />
</p:inputText>

Voir aussi

• Les caractères d'imprimerie 5.0 p:ajax javadoc
• JSF 2.2 docs pour f:ajax

Answer 2

Pourquoi ne pas utiliser PrimeFaces ? Commande à distance composant ?

Il vous donne une fonction Javascript globale, que vous pouvez appeler d'où vous voulez quand vous voulez. Elle vous permet d'appeler la méthode managed-bean et dispose de la fonction update pour une mise à jour partielle.

<p:inputText id="input" />

<h:form>
    <p:remoteCommand name="sendAjaxical" update="somefield" action="#{someBean.doSomething}"/>
</h:form>

Register, j'ai emprunté ce qui suit à la même réponse que celle que vous avez postée :

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
});

Answer 3

Vous ne pouvez pas utiliser le composant Ajax de Primefaces si vous avez choisi la solution jquery/javascript. Vous devrez implémenter votre propre fonction javascript (avec ajax/xmlHttpRequest ) et déclencher cette fonction après une demi-seconde.

Mais il existe une autre solution, une solution de contournement : vous pouvez utiliser un fichier autocomplétion et utiliser 3 attributs utiles : valueChangeListener ( A method expression that refers to a method for handling a valuchangeevent - vous l'utilisez au lieu de completeMethod car vous n'avez pas besoin des suggestions de retour), délai d'interrogation ( 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 lancer la requête ajax après avoir tapé un seul caractère).

J'espère que vous trouverez cette solution intéressante... Vous pouvez voir le composant autocomplete en action ici( http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf ) et vous pouvez en savoir plus en lisant le Guide de l'utilisateur Primefaces pour la version 3.0.M4.

Answer 4

Une solution rapide consisterait à ajouter un délai dans onstart de la 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;
}

En gros, cette fonction déclenche la requête ajax dans un certain délai tout en renvoyant false pour la requête immédiate, et en vidant le onstart sur cette requête temporisée afin de ne pas rester coincé dans une boucle désagréable.

Ensuite, sur le p:ajax :

<p:ajax event="keyup" onstart="return keyupDelay(this, cfg)" />

Le paramètre de délai est facultatif ici, par défaut il est de 2 secondes.