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";
        }
    }
}

执行h：commandlink动作时显示工作图像

1 个答案: