Показывать прогресс загрузки при выполнении запроса JSF Ajax - PullRequest
Новая
       41

Показывать прогресс загрузки при выполнении запроса JSF Ajax

14 голосов
/ 24 октября 2011

Как я могу показать некоторые сообщения о загрузке при отправке запроса с помощью <f:ajax>?

Ответы [ 2 ]

29 голосов
/ 24 октября 2011

Если вы еще не используете стороннюю библиотеку компонентов, в которой уже может быть готовый компонент, такой как PrimeFaces с <p:ajaxStatus>, то вы можете используйте предоставляемую JSF функцию JavaScript jsf.ajax.addOnEvent() (и, в конечном итоге, также jsf.ajax.addOnError()), чтобы подключить функцию к событиям ajax.

Вот базовый пример: 

<script>
    jsf.ajax.addOnEvent(function(data) {
        var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
        var ajaxloader = document.getElementById("ajaxloader");

        switch (ajaxstatus) {
            case "begin": // This is called right before ajax request is been sent.
                ajaxloader.style.display = 'block';
                break;

            case "complete": // This is called right after ajax response is received.
                ajaxloader.style.display = 'none';
                break;

            case "success": // This is called when ajax response is successfully processed.
                // NOOP.
                break;
        }
    });
</script>

<img id="ajaxloader" src="ajaxloader.gif" style="display: none;" />

См. Также главу 13.3.5.2 спецификации JSF 2.0 :

13.3.5.2 Мониторинг событий для всех запросов Ajax

JavaScript API предоставляет функцию jsf.ajax.addOnEvent, которую можно использовать для регистрации функции JavaScript это будет уведомлено, когда произойдет любое событие Ajax-запроса / ответа. См. Раздел 14.4 «Регистрация обратного вызова». Функции »для более подробной информации. Функция jsf.ajax.addOnEvent принимает аргумент функции JavaScript, который будет уведомляется, когда события происходят во время любого цикла Ajax-запросов / ответов. Реализация должна убедитесь, что зарегистрированная функция JavaScript должна вызываться в соответствии с событиями, описанными в Раздел ТАБЛИЦА 14-3 «События».

Кстати, вы можете бесплатно получить несколько крутых гифок загрузчика ajax от http://www.ajaxload.info,.

3 голосов
/ 25 октября 2011

richfaces имеет очень простой в использовании компонент, который я использую так: 

<a4j:status startText="" stopText="" onstart="showAjaxActive();" onstop="hideAjaxActive();"/>
...