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 here:

http://www.primefaces.org/showcase-labs/ui/ajaxStatusScript.jsf

However, such behavior is not desired for all components on the page. For example, for autocomplete it would be nicer to have non-blocking one just next to autocomplete component. In RichFaces, there was status attribute by autocomplete component.

In PrimeFaces (3.4 SNAPSHOT), is there a way how to have two different ajax statuses on the page trigger them independently as needed?

Thanks, Lukas

Ravi Kadaboina · Answer 1 · 2012-08-03T16:27:29.407

9

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>

edited Aug 03 '12 at 16:27

answered Aug 03 '12 at 04:32

Ravi Kadaboina

8,494
3
30
42

1

well, but what if I want to trigger different ajax status? I don't want to turn it off completely. I want to trigger different one that behaves differently – lukas Aug 03 '12 at 15:46
I'm also interested in souch a solution...have u found something that works well? – simonC Aug 28 '13 at 08:25
2

Primefaces 5.1 does not have this attribute `global` anymore. Any suggestion. For autocomplete componente. – Jorge Campos Aug 31 '15 at 20:28

score 7 · Answer 2 · answered Mar 27 '15 at 13:46

7

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.

answered Mar 27 '15 at 13:46

leo

3,677
7
34
46

This is the most recent and correct answer (today!). – Cold Jan 09 '17 at 10:48
This doesn't work in 6.1. The autocomplete just stops querying. – Erveron Oct 21 '17 at 16:11

score 1 · Answer 3 · answered Sep 21 '15 at 13:54

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';
    });
  }

Different Ajax statuses for different components in PrimeFaces

3 Answers3

Linked