PrimeFaces Ajax Status

It is used to show status of current executing ajax request. PrimeFaces provides <p:ajaxStatus> component to show status of process. Here, we are creating an example that implements status component.

This example contains only one JSF file.

JSF File

// ajax-status.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Ajax Status</title>
</h:head>
<h:body>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="Ajax Status: Incomplete" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/ajaxstatus.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="Status: Completed" />
</f:facet>
</p:ajaxStatus>
<p:ajaxStatus onstart="PF('statusDialog').show()" />
<p:dialog widgetVar="statusDialog" modal="true">
<p:graphicImage name="/images/ajaxstatus.gif" />
</p:dialog>
<h:form>
<p:commandButton value="Ajax Request" icon="ui-icon-refresh" />
</h:form>
</h:body>
</html>

Output: