13

在我的网页上，我使用模态的全局 ajax 状态。即当有ajax调用时，用户被阻止执行其他动作，被迫等待。像这儿：

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

但是，页面上的所有组件都不需要这种行为。例如，对于自动完成，最好在自动完成组件旁边有一个非阻塞的。在 RichFaces 中，自动完成组件有 status 属性。

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

谢谢，卢卡斯

4

3 回答 3

10

您可以使用全局属性是否触发 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>
于 2012-08-03T04:32:44.423 回答
8

在 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 标签内。

于 2015-03-27T13:46:33.340 回答
2

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

如果要为页面的某些部分添加加载指示器，则需要添加两个<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>

loading重要的是为加载指示器和内容设置正确的样式类content。两个面板还需要有一个它们共享的类，在本例中为contentPreviewClass。

要在加载指示器和内容之间切换，您只需要调用一个 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';
    });
  }
于 2015-09-21T13:54:04.380 回答