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

Я использую $.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');
            }
        });
    });

Ответы

Ответ 1

Несколько человек спросили об обходном пути, который я закончил, поэтому я решил поделиться этим. Это ничего особенно элегантного или сложного, но, похоже, это сработало. Я не использовал фреймворк с момента выпуска официального 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.
        //
    });
});

Ответ 2

Вы можете использовать события 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) {
                //...
            }
        });
    });

Ответ 3

Прежде чем 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/

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Поместите ниже код в представление мастера/макета

   <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( 'шоу'); .
  • $mobile.loading( 'скрыть');

Ответ 8

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

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

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

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