Mostrar la carga de páginas de Spinner en Ajax en jQuery Mobile

Estoy usando $ .ajax () para completar una lista en mi aplicación web móvil. Lo que me gustaría hacer es tener el jogador de carga móvil jQuery aparece mientras se realiza esta llamada y desaparecer una vez que la lista se completa. La versión actual de JQM utiliza $.mobile.showPageLoadingMsg() y $.mobile.hidePageLoadingMsg() para mostrar y ocultar el spinner de carga, respectivamente. No puedo averiguar exactamente dónde colocar estas declaraciones para obtener el resultado correcto. Parece que debería ser algo bastante fácil de lograr, solo que no he podido encontrar nada sobre este escenario exacto.

Aquí está la llamada ajax dentro de la función create page:

 $('#main').live('pagecreate', function(event) { $.ajax({ url: //url dataType: 'json', headers: //headers success: function(data) { for(i = 0; i < data.length; i++) { $('#courses').append('
  • ' + data[i].name + '
      ' + '' + data[i].evaluatedUserIds.length + '
    • '); $('#course' + data[i].id).listview(); for(j = 0; j < data[i].evaluatedUserIds.length; j++) { $('#course' + data[i].id).append('
    • ' + data[i].evaluatedUserIds[j] + '
    • '); } $('#course' + data[i].id).listview('refresh'); } $('#courses').listview('refresh'); } }); });

      Puede usar beforeSend y complete eventos de $.ajax para llamar a $.mobile.showPageLoadingMsg y $.mobile.hidePageLoadingMsg . Se vería así:

       $('#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) { //... } }); }); 

      Antes de JQM 1.2:

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

      Desde JQM 1.2:

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

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

      Algunas personas me han preguntado sobre la solución alternativa que terminé implementando, así que pensé en compartirla. No es nada particularmente elegante o complicado, pero parece funcionar. No he usado el framework desde que se lanzó el 1.0 oficial, por lo que esto puede haberse resuelto en la actualización. Básicamente, puse la $.mobile.showPageLoadingMsg() en la función pageshow , pero la envolví en una cláusula if que solo se activa la primera vez que se muestra la página:

       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. // }); }); 

      Esto es un poco tarde … pero necesitas:

      1. Llame a $.mobile.showPageLoadingMsg() antes de la llamada AJAX.
      2. Haga la llamada AJAX. La llamada debe enviarse de forma asíncrona (ponga async: true en su llamada).
      3. Agregue $.mobile.hidePageLoadingMsg() en su función success() .
       $(document).ajaxSend(function() { $.mobile.loading( 'show'); }); $(document).ajaxComplete(function() { $.mobile.loading( 'hide'); }); 

      Debería hacer $ .mobile.showPageLoadingMsg () justo antes de la llamada ajax, y $ .mobile.hidePageLoadingMsg () en el bloque de éxito (o error) para que desaparezca una vez que un resultado regrese.

      Nunca utilicé jQuery mobile, pero debería funcionar de la misma manera que mostrar / ocultar una vieja imagen giratoria.

      O, la forma más simple es expresslo globalmente como una separación de preocupaciones,

      Ponga el código debajo en su vista maestra / diseño

         

      Editar: utilice en su lugar si está orientando la última versión de JQM (> 1.2):

      • $ .mobile.loading (‘mostrar’);
      • $ .mobile.loading (‘ocultar’);

      El problema aquí es que la llamada a $ .ajax () ocurre dentro del flujo de control del controlador de eventos (el llamador).

      Una forma muy simple de desacoplar la solicitud de ajax de este flujo de control es dejar que setTimeout () invoque esta función para usted, así:

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

      Luego puede usar los eventos ‘beforeSend’ y ‘complete’ de $ .ajax () como se indicó anteriormente y asegúrese de que su spinner se muestre.