Complete Busy Status Indicator with Primefaces

Recep February 17, 2014
5 people like this post

Primefaces has a p:ajaxStatus component to listen ajax request and response. So you can indicate your busy bar by coding show indicator onstart  and hide it oncomplete. Like this ;

template.xhtml


<script type="text/javascript" src="#{request.contextPath}/js/myApp.js">// <![CDATA[

</h:head>

<h:body>
   <p:ajaxStatus onstart="lockScreen();" oncomplete="releaseScreen();" />
   <p:dialog id="busyStatus" widgetVar="busyStatusDialog"  modal="true" showHeader="false" draggable="false" visible="false"  closable="false" resizable="false">
 <p:graphicImage value="/images/ajaxloadingbar.gif" />
 </p:dialog>

</h:body>

myApp.js

   function lockScreen() {
	busyStatusDialog.show();
}

   function releaseScreen(){
	busyStatusDialog.hide();
}

But you have to use redirect or ajax=”false” on your navigation commandButton. And your p:ajaxStatus component can not listen your request and response. So I am calling this method ‘Complete Busy Status Indicator’. Redirection method has two req/res phases. Firstly using ajax, secondly using Post method. And it can not lock your screen while server processing. This may be big problem for your system because your customer can click “Save” button twice, or get angry by saying “wtf the system does not running healthy :)” Some ORM tools can persist object twice in this case like Toplink. So we will use cookie parameters to  indicate busy bar.  And modify the primefaces.js by exporting from primefaces.jar.

template.xhtml

<h:head>
    <script src="#{request.contextPath}/js/myApp.js"  type="text/javascript" />
</h:head>

<h:body>
   <p:ajaxStatus onstart="lockScreen();" />
   <p:dialog id="busyStatus" widgetVar="busyStatusDialog"  modal="true" showHeader="false" draggable="false" visible="false"  closable="false" resizable="false">
 <p:graphicImage value="/images/ajaxloadingbar.gif" />
 </p:dialog>

</h:body>

Interval starts on lockScreen() function to listen cookie parameter “responseReceived”;
myApp.js

$(document).ready(function(){
	$.cookie('responseReceived', 'true', { path: '/'});

});
function lockScreen() {
	busyStatusDialog.show();
        monitorScreen();
}

function monitorScreen() {
	$.cookie('responseReceived', '', { path: '/',expires: -1});
	if (PrimeFaces.cookiesEnabled()) {
		window.chartExportingMonitor = setInterval(function() {
			var redirectRequested = $.cookie('responseReceived', { path: '/' });
			if (redirectRequested === null) {
				busyStatusDialog.show();
			} else {
				busyStatusDialog.hide();
				clearInterval(window.chartExportingMonitor);
			}
		}, 150);
	}
};

On handleResponse() function, firstly cookie parameter assigned true, and if there is a redirection, “responseReceived” parameter expired.

While open a dialog framework, busy indicator is shown again.
modified primefaces.js

 handleResponse: function (xmlDoc) {
            var redirect = xmlDoc.find("redirect"),
                callbackParams = xmlDoc.find('extension[ln="primefaces"][type="args"]'),
                scripts = xmlDoc.find("eval");
				$.cookie('responseReceived', 'true', { path: '/'});
            if (redirect.length > 0) {
				$.cookie('responseReceived', '', { path: '/',expires: -1});
                window.location = redirect.attr("url")
            } else {
                this.args = callbackParams.length > 0 ? $.parseJSON(callbackParams.text()) : {};
                for (var i = 0; i < scripts.length; i++) {
                    $.globalEval(scripts.eq(i).text())
                }
            }
        },

openDialog: function (cfg) {
   $.cookie('responseReceived', '', { path: '/',expires: -1});

   dialogFrame.on("load", function () {
       var $frame = $(this),
       ..........................
       $.cookie('responseReceived', 'true', { path: '/'});
           if (!$frame.data("initialized")) {
                   ............................
                    })
            }
}

( 13829 )

  • 2
  • 1264

Leave your comment

Comments (2 people commented this post)

  • avatar image

    Furkan Ilgın

    February 19, 2014 Reply
    Good job man :)) I suggest you separate your site as english and turkish ;)
  • avatar image

    Alexander Sali

    February 8, 2018 Reply
    Hi Recep, When we faced this problem those days, we couldn't find any workaround. While we're looking for a solution, we came up with your blog. Thanks a lot Recep, great job.