Различные статусы Ajax для разных компонентов в PrimeFaces

На моей веб-странице я использую глобальный статус ajax, который является модальным. То есть, когда есть аякс-вызов, пользователь блокируется от выполнения других действий и вынужден ждать. Как здесь:

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

Однако такое поведение нежелательно для всех компонентов на странице. Например, для автозаполнения было бы лучше иметь неблокирующую систему рядом с компонентом автозаполнения. В RichFaces атрибут статуса был автокомпонентным компонентом.

В PrimeFaces (3.4 SNAPSHOT) существует ли способ, когда два разных состояния ajax на странице запускают их независимо по мере необходимости?

Спасибо, Lukas

Ответ 1

Вы можете использовать глобальный атрибут, следует ли запускать ajaxStatus или нет. Например, установка его false не приведет к возникновению ajaxStatus следующим образом:

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

Для других компонентов, где вы обновляете ajax. Вы можете сделать что-то вроде этого:

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

UPDATE. Если вы хотите получить два состояния, напишите свой собственный диалог следующим образом:

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

Ответ 2

В Primefaces 5.1 вы увидите предупреждение с решением Ravi, и оно не будет работать.

  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

Правильное решение для Primefaces 5.1 состоит в том, чтобы добавить

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

внутри тега автозаполнения.

Ответ 3

У меня была одна и та же проблема. Это было мое решение (не очень простое, но очень гибкое):

Если вы хотите добавить Индексатор загрузки для некоторой части страницы, вам нужно добавить два элемента <h:panelGroup>, один для индикатора загрузки и один для загруженного содержимого.

например.:

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

Важно установить правильный стильClass loading для индикатора загрузки и content для содержимого. Обе панели также должны иметь класс, который они разделяют, в этом случае класс contentPreview.

Чтобы переключиться между индикатором загрузки и контентом, вам просто нужно вызвать функцию JavaScript. showLoading('.contentPreview'), чтобы показать индикатор загрузки hideLoading('.contentPreview'), чтобы скрыть индикатор и показать содержимое.

например.:

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

Код для функций JavaScript выглядит следующим образом:

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