Question

在我的网页上，我使用的是模态的全局ajax状态。也就是说，当存在ajax调用时，阻止用户执行其他操作并被迫等待。像这里：

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

但是，页面上的所有组件都不需要此类行为。例如，对于自动完成，在自动完成组件旁边使用非阻塞功能会更好。在RichFaces中，自动完成组件有状态属性。

在PrimeFaces（3.4 SNAPSHOT）中，有没有办法让页面上的两个不同的ajax状态根据需要独立触发？

谢谢，卢卡斯

Answer 1

您可以使用global属性是否触发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>

更新：如果您想要两个状态，那么请编写您自己的对话框，如下所示：

<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

在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"/>

在autoComplete标记内。

Answer 3

我有同样的问题这是我的解决方案（不是非常简单但非常灵活）：

如果您想为页面的某些部分添加一个Loading Indikator，您需要添加两个<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>

重要的是为加载指标设置正确的styleClass 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';
    });
  }

PrimeFaces中不同组件的不同Ajax状态

3 个答案: