在执行 h:commandlink 操作时显示工作图像

Question

要添加一篇文章，我有 <h:commandlink> 执行一个操作，该操作根据操作结果重定向到成功或错误页面。该操作需要一段时间才能完成执行，大约需要 4 秒。你能告诉我如何在动作开始执行时显示加载图像并在动作终止时隐藏它吗？

Answer 1

您将需要使用 ajax 来完成手头的任务。使用普通的 JSF 和一些 javascript，这将是解决方案：

<h:form>
    <h:commandLink value="Submit" action="#{yourManagedBean.desiredAction}">
        <f:ajax onevent="showProgress" />
    </h:commandLink>
    <!-- other components... -->

    <!-- External div which wraps the loading gif -->
    <div id="divProgress" style="display: none; height: 60px; overflow: hidden;">
        <div style="display: table-cell; vertical-align: text-top;">
            Working...
            <!-- Locate your gif wherever you stored -->
            <h:graphicImage url="resources/images/loading.gif" height="49" width="49" />
        </div>
    </div>

    <script type="text/javascript">
        function showProgress(data) {
            var ajaxStatus = data.status;
            switch (ajaxStatus) {
                case "begin":
                    //This is called right before ajax request is been sent.
                    //Showing the div where the "loading" gif is located
                    document.getElementById("divProgress").style.display = 'table';
                    break;

                case "success":
                    //This is called when ajax response is successfully processed.
                    //In your case, you will need to redirect to your success page
                    var url = window.location.protocol + "//"
                        + window.location.host + "/"
                        + (window.location.port ? ":"+ window.location.port: "");
                    window.location.href = url + "#{request.contextPath}/" + "#{yourManagedBean.resultUrl}";
                    break;
            }
        }
    </script>
</h:form>

在您的托管 bean 中：

@ManagedBean
@ViewScoped
public class YourManagedBean {
    private String resultUrl;
    //getters and setters...
    public void desiredAction() {
        //do the processing...
        if (...) {
            resultUrl = "success.xhtml";
        } else {
            resultUrl = "error.xhtml";
        }
    }
}