Показать Spinner загрузки страницы на Ajax Call в jQuery Mobile

Question

Я использую $ .ajax () для заполнения списка в своем мобильном веб-приложении. Я хотел бы, чтобы во время выполнения этого вызова появлялся спиннер загрузки мобильных приложений jQuery и исчезал, когда список заполнялся. Текущая версия JQM использует $.mobile.showPageLoadingMsg() и $.mobile.hidePageLoadingMsg(), чтобы показать и скрыть загрузчик, соответственно. Я не могу понять, где именно разместить эти заявления, чтобы получить правильный результат. Кажется, что это должно быть довольно легко сделать, я просто не смог найти ничего об этом точном сценарии.

Вот вызов ajax внутри функции pagecreate:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                for(i = 0; i < data.length; i++) {
                    $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>');
                    $('#course' + data[i].id).listview();
                    for(j = 0; j < data[i].evaluatedUserIds.length; j++) {
                        $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>');
                    }
                    $('#course' + data[i].id).listview('refresh');
                }
                $('#courses').listview('refresh');
            }
        });
    });

Answer 1

Вы можете использовать beforeSend и complete события $.ajax для вызова $.mobile.showPageLoadingMsg и $.mobile.hidePageLoadingMsg.Выглядело бы так:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
            complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                //...
            }
        });
    });

Answer 2

До JQM 1.2:

$(document).ajaxStart(function() {
    $.mobile.showPageLoadingMsg();
});

$(document).ajaxStop(function() {
    $.mobile.hidePageLoadingMsg();
});

Начиная с JQM 1.2:

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

http://api.jquerymobile.com/page-loading/

Answer 3

Несколько человек спрашивали об обходном пути, который я в итоге реализовал, поэтому я решил поделиться им. В этом нет ничего особенно элегантного или сложного, но, похоже, это сработало. Я не использовал фреймворк с тех пор, как была выпущена официальная версия 1.0, так что это может быть решено в обновлении. По сути, я поместил вызов $.mobile.showPageLoadingMsg() в функцию pageshow, но заключил его в условие if, которое запускается только при первом показе страницы:

var mainloaded = false;

$('#main').live('pageshow', function(event) {   //Workaround to show page loading on initial page load
    if(!mainloaded) {
    $.mobile.showPageLoadingMsg();
    }
});

$('#main').live('pagecreate', function(event) { 
    $.ajax({
        url: //url
        dataType: //datatype,
        headers: //headers
        success: function(data) {
            //
            //...loading stuff
            //
            $.mobile.hidePageLoadingMsg();
            mainloaded = true;
        }
        //
        //...handle error, etc.
        //
    });
});

Answer 4

Это немного поздно ... но вам нужно:

1. Позвонить $.mobile.showPageLoadingMsg() до вызова AJAX.
2. Выполнить вызов AJAX. Вызов должен быть отправлен асинхронно (укажите async: true в своем вызове).
3. Добавьте $.mobile.hidePageLoadingMsg() в функцию success().

Answer 5

$(document).ajaxSend(function() {
    $.mobile.loading( 'show');
});
$(document).ajaxComplete(function() {
    $.mobile.loading( 'hide');
});

Answer 6

Или, самый простой способ - использовать глобально как разделение интересов -

Вставьте приведенный ниже код в ваш основной вид / макет

   <script type="text/javascript">

    $(document).bind('mobileinit', function () {
        //Loader settings
        $.mobile.loader.prototype.options.text = "Loading..";
        $.mobile.loader.prototype.options.textVisible = true;
        $.mobile.loader.prototype.options.theme = "b";
        $.mobile.loader.prototype.options.textonly = false; 
    }); 

    $(document).on({
        ajaxSend: function () { $.mobile.showPageLoadingMsg(); },
        ajaxStart: function () { $.mobile.showPageLoadingMsg(); },
        ajaxStop: function () { $.mobile.hidePageLoadingMsg(); },
        ajaxError: function () { $.mobile.hidePageLoadingMsg(); }
    });

</script> 

Редактировать: Используйте вместо этого, если вы ориентируетесь на последнюю версию JQM (> 1.2):

• $. Mobile.loading ('show');
• $. Mobile.loading ('скрыть ');

Answer 7

Вы должны сделать $. Mobile.showPageLoadingMsg () непосредственно перед вызовом ajax и $. Mobile.hidePageLoadingMsg () в блоке успеха (или сбоя), чтобы он шелпрочь, как только вернется результат.

Я никогда не использовал jQuery mobile, но он должен работать так же, как показывать / скрывать обычное вращающееся изображение.

Answer 8

Проблема здесь в том, что вызов $ .ajax () происходит в потоке управления обработчика событий (вызывающего).

Очень простой способ отсоединить запрос ajax от этого потока управлениячтобы позволить setTimeout () вызвать эту функцию для вас, например, так:

setTimeout(function(){$.ajax( ... )}, 1);

Затем вы можете использовать события beforeSend и complete $ .ajax (), как указано выше, и убедитесь, чтоваш счетчик показывает вверх.