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

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 Elements, one for the loading Indicator and one for the loaded Content.

e.g.:

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

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