Afficher la Page de Chargement Spinner sur Appel Ajax en jQuery Mobile

Question

Je suis à l'aide de $.ajax() pour remplir une liste dans mon application web mobile. Ce que je voudrais faire est d'avoir le jQuery mobile de chargement spinner semble bien que cet appel est en cours et disparaissent une fois que la liste se remplit. La version actuelle de JQM utilise $.mobile.showPageLoadingMsg() et $.mobile.hidePageLoadingMsg() pour afficher et masquer le chargement spinner, respectivement. Je ne peux pas savoir exactement où placer ces instructions pour obtenir le résultat correct. Cela semble comme il devrait être assez facile à réaliser, je n'en ai pas été en mesure de trouver quelque chose à propos de ce scénario exact.

Voici l'appel ajax à l'intérieur de la pagecreate fonction:

$('#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

Vous pouvez utiliser l' beforeSend et complete événements d' $.ajax d'appel $.mobile.showPageLoadingMsg et $.mobile.hidePageLoadingMsg. Devrait ressembler à ceci:

$('#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

Avant de JQM 1.2:

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

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

Depuis JQM 1.2:

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

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

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

Answer 3

Quelques personnes ont demandé à propos de la solution de contournement que j'ai fini par mettre en place, alors j'ai pensé que je devais le partager. Il n'a rien de particulièrement élégant ou compliqué, mais il ne semble pas fonctionner. Je n'ai pas utilisé le framework depuis le officiel 1.0 a été publié, ce qui peut avoir été résolu dans la mise à jour. Essentiellement, j'ai mis l' $.mobile.showPageLoadingMsg() appel dans l' pageshow de la fonction, mais enveloppé dans une si la clause que ne se déclenche la première fois que la page est affichée:

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

C'est un peu tard...mais vous avez besoin de:

1. Appelez $.mobile.showPageLoadingMsg() avant l'appel AJAX.
2. Faire l'appel AJAX. L'appel doit être envoyé de manière asynchrone (mettez - async: true de votre appel).
3. Ajouter $.mobile.hidePageLoadingMsg() votre success() fonction.

Answer 5

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