показать рабочее изображение при выполнении действия h: commandlink

Чтобы добавить статью, у меня есть <h:commandlink>, который выполняет действие, которое перенаправляет на страницу успеха или ошибки в зависимости от результатов действия. Действие занимает некоторое время, чтобы завершить его выполнение, примерно 4 секунды. Не могли бы вы рассказать мне, как отображать загрузочное изображение, когда действие начинает выполняться, и скрывать его, когда действие завершается?


javascript jsf jsf-2
person neo    schedule 05.12.2014    source источник
comment
Поскольку ваш вопрос в основном Возможно ли..., правильным ответом будет Да, возможно.   -  person Luiggi Mendoza    schedule 05.12.2014
comment
отображать загрузочное изображение? Если вы настаиваете на использовании некоторых библиотек с богатыми компонентами, таких как PrimeFaces, вот они: <p:blockUI>, <pe:blockUI>, <p:ajaxStatus>   -  person Tiny    schedule 05.12.2014
comment
У меня есть ответ, но он предназначен для того, чтобы скрыть gif после успешной обработки. Я не знаю, как отправить перенаправление, так как я не знаю, как установить правильные данные без использования взлома   -  person Luiggi Mendoza    schedule 05.12.2014
comment
Я не прошу перенаправления, потому что я знаю, как это сделать.   -  person neo    schedule 05.12.2014
comment
Я просто прошу иметь что-то вроде onbegin и oncomplete для a4j: commandlink, но я не хочу использовать богатые лица.   -  person neo    schedule 05.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет использовать 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>

И в вашем управляемом компоненте:

@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";
        }
    }
}
person Luiggi Mendoza    schedule 05.12.2014
comment
Спасибо за попытку ответить, я сделал то же самое с событием onClick для h: commandLink, и это сработало так, как я этого хочу. - person neo; 08.12.2014