使用f:ajax等待数据完成处理,然后更新



我有一个艰难的时间与网格JSF, AJAX和JavaScript。下面是我要做的:

当用户提交表单时,他们被引导到一个新页面。该页面最初检查他们的提交是否已被处理,如果没有,则显示一个进度条(参见Twitter Bootstrap)。然后,我使用f:ajax来检查它是否已完成处理。调用waitForProcessing方法;它只是等待,直到processing设置为true,然后返回true。此时,ajax应该调用JavaScript将进度条设置为不可见,然后更新页面。下面是代码:

<ui:define name="content">
        <c:choose>
            <c:when test="#{not submission.isIsProcessed}">
                <f:ajax onevent="setVisibility('processing-dialog', 'none'); setVisibility('processing-backdrop', 'none');" listener="#{submission.waitForProcessing}" status="success" />
                <div class="modal-backdrop fade in" id="processing-backdrop"></div>
                <div id="processing-dialog" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
                    <div class="modal-header">
                        <h3 id="myModalLabel">One sec...</h3>
                    </div>
                    <div class="modal-body">
                        <p>We are compiling and running your code!</p>
                        <div class="progress progress-striped active">
                            <div class="bar" style="width: 40%;"></div>
                        </div>
                    </div>
                </div>
            </c:when>
        </c:choose>
.......
.......

这里有很多东西不起作用。首先,f:ajax抛出一个异常,因为显然f:ajax只能嵌套在某些组件中。有更好的方法吗?目标是显示一个进度条,直到后端处理完成。这个处理过程可能需要几分钟,这就是为什么我在数据准备好之前不让页面自行加载的原因。

您的问题是f:ajax只执行一次。如果你想多次执行相同的ajax调用,你应该使用poll组件,该组件只能在框架中作为PrimeFaces、RichFaces和其他组件使用。RichFaces有一个与您描述的完全一样的组件(它在内部使用轮询)。你可以在这里查看:RichFaces进度条。

相关内容

最新更新