CODEWITHSUNDEEP
ajaxjsfprimefaces
Steve Waters
Steve Waters

Reputation: 3548

How to delay Primefaces AjaxStatus on JSF?

How to add a delay (300ms for example) on when the Primefaces' AjaxStatus would show. Right now it shows always immediately when there's an Ajax request pending. This is troublesome for example on "onkeyUp" events when each key stroke brings the loading dialog up for a split second.

Here's my AjaxStatus loading indicator component:

<p:ajaxStatus id="startAjax" onstart="PF('start').show();" oncomplete="PF('start').hide();" >
</p:ajaxStatus>

<p:dialog widgetVar="start" showHeader="false" resizable="false">
    <h:graphicImage value="#{resource['/images/loading.gif']}"></h:graphicImage>
</p:dialog>

Upvotes: 9

Views: 4849

Answers (2)

Mikhail Chibel
Mikhail Chibel

Reputation: 1955

You need to wrap your PF('start').start() with a function which will call it with a delay. Also, the onComplete handler should check if you have pending status to show and cancel them. This is to avoid the case where ajax finished before status displayed.

Code should be something like this (not tested)

<p:ajaxStatus id = "startAjax" onstart = "startHandler();" oncomplete = "endHandler();"/>
    <script>
        var ajaxInProgress;
        function startHandler() {
            ajaxInProgress = setTimeout(function () {
                if(ajaxInProgress){
                   PF('start').show();
                }
            }, 3000);
        }
        function endHandler() {
            clearTimeout(ajaxInProgress);
            PF('start').hide();
            ajaxInProgress = null;
        }
    </script>

Upvotes: 15

Melloware
Melloware

Reputation: 11994

I submitted a PR that this delay attribute will be native in PF 7.1+.

https://github.com/primefaces/primefaces/pull/5138

Thanks for the suggestion!

Upvotes: 1

Related Questions