web-dev-qa-db-ja.com

primefacesキーアップまたはその他のajaxイベントの遅延

私のようなものがあります：

<p:inputText...>
    <p:ajax event="keyup" update="somefield" listener="#{someBean.doSomething}"/>
</p:inputText>

しかし、キーを押すたびにAjaxリクエストを実行したくありません。ユーザーが書き込みを停止してから0.5秒後にリクエストを実行したいと考えています。

別の質問でこの問題がjQueryで解決されるのを見ました： ユーザーが入力を停止するまで.keyup（）ハンドラーを遅延させる方法？

プライムフェイスでこれを実行できるかどうか、またはjQueryの質問からのソリューションをどのように適応させるかについて知りたいのですが。
PrimeFaces 3.0.M4を使用しています。
前もって感謝します。

jsf-2primefaces
22
Roteke

PrimeFacesの RemoteCommand コンポーネントを使用しないのはなぜですか？

それはあなたがいつでもどこからでも呼び出すことができるグローバルなJavaScript関数を提供します。また、managed-beanメソッドを呼び出すことができ、部分更新用のupdate属性があります。

<p:inputText id="input" />

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

イベントハンドラーを登録します。 あなたが投稿したのと同じ答え から以下を借りました：

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
});
18
Bhesh Gurung

Primefaces 5.xを使用している場合、この目的のためにp:ajaxタグにdelay属性があります。したがって、次のように行われます。

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

そうでない場合は、f:ajaxの代わりにp:ajaxを使用して実現できます（はい、p:inputTextでも機能します）。 f:ajaxは、JSF 2.2以降、 キューコントロール のサポートを追加しました。したがって、コードは次のようになります。

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

以下も参照してください：

21
Xtreme Biker

Jquery/javascriptソリューションを選択した場合、Primefaces Ajaxコンポーネントを使用できません。独自のjavascript関数を実装する必要があります（ajax/xmlHttpRequestサポート）、0.5秒後にその関数をトリガーします。

しかし、別の解決策、回避策があります：autocompleteコンポーネントを使用し、3つの役立つ属性を使用できます：valueChangeListener（A method expression that refers to a method for handling a valuchangeevent-返される提案は必要ないため、completeMethodの代わりにそれを使用します）、queryDelay（Delay to wait in milliseconds before sending each query to the server）およびminQueryLength（Number of characters to be typed before starting to query-1文字だけ入力した後でajaxリクエストを開始したくない場合）。

このソリューションが静かで興味深いものになることを願っています...ここでオートコンプリートコンポーネントの動作を確認してください（ http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf ）そしてあなた詳細については、3.0.M4のPrimefacesユーザーガイドを参照してください。

1
spauny

簡単なハッキングは、p:ajaxのonstartに遅延を追加することです。 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;
}

基本的に、その関数は特定のタイムアウトでajaxリクエストをトリガーし、即時のリクエストに対してfalseを返し、厄介なループに陥らないようにそのタイムアウトリクエストのonstartを空にします。

次にp:ajaxで：

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

Delayパラメータはここではオプションで、デフォルトでは2秒です。

1
Hatem Alimam