web-dev-qa-db-fra.com

Afficher le chargement de la page Spinner lors d'un appel Ajax dans jQuery Mobile

J'utilise $ .ajax () pour remplir une liste dans mon application Web mobile. Ce que je voudrais faire, c'est que le spinner de chargement mobile jQuery apparaisse pendant cet appel et disparaisse une fois la liste remplie. La version actuelle de JQM utilise $.mobile.showPageLoadingMsg() et $.mobile.hidePageLoadingMsg() pour afficher et masquer le spinner de chargement, respectivement. Je ne peux pas savoir exactement où placer ces déclarations pour obtenir le résultat correct. Cela semble être une tâche assez facile à accomplir, je n'ai tout simplement pas pu trouver quoi que ce soit sur ce scénario exact.

Voici l'appel ajax dans la fonction 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');
            }
        });
    });
jqueryjquery-mobile
36
Sean

Quelques personnes ont posé des questions sur la solution de contournement que j'ai fini par implémenter, alors j'ai pensé que je la partagerais. Ce n'est rien de particulièrement élégant ou compliqué, mais cela a semblé fonctionner. Je n'ai pas utilisé le framework depuis la sortie de la version 1.0 officielle, donc cela peut avoir été résolu dans la mise à jour. Essentiellement, j'ai mis l'appel $.mobile.showPageLoadingMsg() dans la fonction pageshow, mais je l'ai enveloppé dans une clause if qui ne se déclenche que 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.
        //
    });
});
14
Sean

Vous pouvez utiliser les événements beforeSend et complete de $.ajax appeler $.mobile.showPageLoadingMsg et $.mobile.hidePageLoadingMsg. Ressemblerait à 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) {
                //...
            }
        });
    });
58
Alex Turpin

Avant 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/

50
Marvin Emil Brach

C'est un peu tard ... mais vous devez:

  1. Appelez $.mobile.showPageLoadingMsg() avant l'appel AJAX.
  2. Faites l'appel AJAX. L'appel doit être envoyé de manière asynchrone (mettez async: true Dans votre appel).
  3. Ajoutez $.mobile.hidePageLoadingMsg() dans votre fonction success().
10
Ben
$(document).ajaxSend(function() {
    $.mobile.loading( 'show');
});
$(document).ajaxComplete(function() {
    $.mobile.loading( 'hide');
});
9
Patrioticcow

Ou, le moyen le plus simple est de le mettre globalement comme une séparation des préoccupations -

Mettez le code ci-dessous dans votre vue principale/mise en page

   <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>

Modifier: veuillez utiliser à la place si vous ciblez la dernière version de JQM (> 1.2):

  • $ .mobile.loading ('show');
  • $ .mobile.loading ('cacher');
3
sandeep talabathula

Vous devez faire $. Mobile.showPageLoadingMsg () juste avant l'appel ajax, et $. Mobile.hidePageLoadingMsg () dans le bloc de réussite (ou d'échec) pour qu'il s'en aille une fois qu'un résultat revient.

Je n'ai jamais utilisé jQuery mobile, mais il devrait fonctionner de la même manière que l'affichage/le masquage d'une image en rotation régulière.

3
degenerate

Le problème ici est que l'appel à $ .ajax () se produit dans le flux de contrôle du gestionnaire d'événements (l'appelant).

Un moyen très simple de découpler la demande ajax de ce flux de contrôle consiste à laisser setTimeout () appeler cette fonction pour vous, comme ceci:

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

Vous pouvez ensuite utiliser les événements 'beforeSend' et 'complete' de $ .ajax () comme indiqué précédemment et assurez-vous que votre spinner s'affiche.

2
juleq