ajax - 如何显示动态 Primefaces 组件的 ajaxstatus

Question

我注意到几乎所有将 'dynamic' 属性设置为 'true' 的 PF 组件只会在短暂延迟(这是可以理解的)后显示，并且也不会触发 ajax 启动/停止事件。

这是我的(完美工作的)Ajax 状态组件，为简洁起见省略了实际的对话框内容:

<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" onerror="errorDialog.show();"/> 

这是一个动态加载的对话框。它需要从支持 bean 中获取数据:

<p:dialog modal="true" widgetVar="confDialog" position="center" id="confD" dynamic="true">
<p:panelGrid>
<p:row>
    <p:column>
        <h:outputText value="Date"></h:outputText>
    </p:column>
    <p:column>
        <h:outputText value="#{myBean.currentDate}">
            <f:convertDateTime locale="#{myBean.currentLanguage}" type="both" dateStyle="full" timeStyle="full" timeZone="#{myBean.currentTimeZone}"></f:convertDateTime>
        </h:outputText>
    </p:column>
</p:row>
</p:panelGrid>
<p:commandButton value="Close" type="button" onclick="confDialog.hide();">
</p:commandButton>
</p:dialog>

执行某些操作并显示动态加载的确认对话框的命令按钮:

<p:commandButton value="Do it" type="submit" ajax="true" process="@form"
                action="#{bean.processForm}"
                oncomplete="if(!args.validationFailed){confDialog.show();}"
                update="confD @form"/>

当命令按钮将数据提交给支持 bean 并取回数据时，将显示 Ajax 状态对话框。然后ajax状态对话框消失，有1-2秒的延迟，并显示确认对话框。

动态加载的选项卡(在 PF tabView 组件中)也会发生同样的情况。

为什么在动态组件加载期间不显示我的 ajax 状态对话框？我怎样才能显示它？

编辑:

感谢@partlov，我找到了一个不覆盖 PF 函数的解决方案，方法是将 JQ ajax 启动/停止处理程序添加到动态加载的对话框中:

jQuery(document).ready(function() {
 confDialog.getJQ().ajaxStart(function(){statusDialog.show()});
 confDialog.getJQ().ajaxStop(function(){statusDialog.hide()});
});

Answer 1

正如 Primefaces 文档中所写 <p:ajaxStatus>只是拦截全局的 AJAX 请求，这个请求不是全局的。没有简单的方法可以做到这一点。由于加载对话框的时间很短，我真的不认为这样做有什么意义。我认为，唯一的解决方案是重载 Primefaces 对话框 JavaScript 方法。

Primefaces 电话 loadContents()加载对话框内容时的方法，因此您可以为此覆盖此方法。我不建议您这样做，因为这是未记录的并且可以在 Primefaces 的 future 版本中更改:

jQuery(document).ready(function() {
  var oldLoadContents = PrimeFaces.widget.Dialog.loadContents;
  PrimeFaces.widget.Dialog.loadContents = function() {
    statusDialog.show();
    oldLoadContents();
  }
});

这应该显示您的动态加载对话框。您可以使用 onShow p:dialog 的属性关闭对话框:

onShow="statusDialog.hide()"