如何显示动态Primefaces组件的ajaxstatus

时间:2013-02-26 21:31:59

标签: ajax jsf primefaces

我注意到几乎所有将“动态”属性设置为“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我通过在动态加载的对话框中添加JQ ajax启动/停止处理程序,找到了一个没有覆盖PF函数的解决方案:

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

1 个答案:

答案 0 :(得分:5)

正如Primefaces文档<p:ajaxStatus>中所描述的那样,只是拦截全局AJAX请求,而且这个请求不是全局的。没有简单的方法可以做到你想要的。由于加载对话的时间很短,我真的没有看到这一点。我认为,只有解决方案是重载Primefaces对话框的JavaScript方法。

Primefaces在加载对话框内容时调用loadContents()方法,因此您可以为此覆盖此方法。我不建议你这样做,因为这是未记录的,可以在Primefaces的未来版本中进行更改:

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

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

onShow="statusDialog.hide()"