Different Ajax statuses for different components in PrimeFaces

Question

On my webpage I use global ajax status that is modal one. That is, when there is an ajax call, the user is blocked from performing other actions and is forced to wait. Like

Answer 1

You can use the global attribute whether to trigger ajaxStatus or not. For example, setting it false will not trigger ajaxStatus like this:

<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" 
completeMethod="#{autoCompleteBean.complete}" global="false"/>

For other components where you are updating with ajax. You can do some thing like this:

<p:inputText value="#{autoCompleteBean.txt1}">
    <f:validateLength minimum="2" /> 
    <p:ajax global="false" update="email" event="keyup"/>
</p:inputText>

UPDATE : If you want two status then do write your own dialog like this:

<p:dialog widgetVar="status" modal="true" closable="false">
   Please Wait
</p:dialog>

<p:inputText value="#{autoCompleteBean.txt1}">
    <f:validateLength minimum="2" /> 
    <p:ajax global="false" onstart="status.show()" oncomplete="status.hide()" update="email" event="keyup"/>
</p:inputText>

Answer 2

I had the same Problem this was my Solution (not super simple but very flexible):

If you want to add an Loading Indikator for some Part of the Page you need to add two <h:panelGroup> Elements, one for the loading Indicator and one for the loaded Content.

e.g.:

   <h:panelGroup styleClass="contentPreview content">
        <h:outputText id="previewText" styleClass="updatePreview" value="#{lazyResultBean.previewContent}" />
   </h:panelGroup>
   <h:panelGroup styleClass="contentPreview loading">
        <p:graphicImage style="width: 15px; height: 15px;" name="/images/ajax-loader.gif" />
   </h:panelGroup>

Important is to set the correct styleClass's loading for the Loading Indicator and content for the content. Both Panels also need to have a class which they share, in this case the contentPreview Class.

To switch between loading Indicator and Content you just need to call a JavaScript Function. showLoading('.contentPreview') to show the Loading Indicator hideLoading('.contentPreview') to hide the Indicator and show the content.

e.g.:

    <p:commandButton id="previewBtn" onstart="showLoading('.contentPreview')" oncomplete="hideLoading('.contentPreview')" value="Preview" update="previewText" actionListener="#{lazyResultBean.loadPreviewContent(result.url)}">
    </p:commandButton>

The code for the JavaScript Functions looks as follows:

  function showLoading(clazz) {
    console.log('showLoading' + clazz);
    var loadingElements = $(clazz + '.loading');
    loadingElements.each(function (index, el) {
      el.style.display = 'block';
    });

    var contentElements = $(clazz + '.content');
    contentElements.each(function (index, el) {
      el.style.display = 'none';
    });
  }

  function hideLoading(clazz) {
    console.log('hideLoading' + clazz);
    var loadingElements = $(clazz + '.loading');
    loadingElements.each(function (index, el) {
      el.style.display = 'none';
    });

    var contentElements = $(clazz + '.content');
    contentElements.each(function (index, el) {
      el.style.display = 'block';
    });
  }

Answer 3

In Primefaces 5.1 you will see a warning with Ravi's solution and it will not work.

  27-Mar-2015 14:35:41.877 WARNING [http-apr-8080-exec-2] org.primefaces.component.autocomplete.AutoCompleteRenderer.encodeScript The process/global/onstart/oncomplete attribute of AutoComplete was removed. Please use p:ajax with the query event now

The correct solution for Primefaces 5.1 is to add

 <p:ajax event="query" global="false"/>

inside the autoComplete tag.