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

mostrar loading mientras carga pagina jquery

Question

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

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

Answer 2

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/

Answer 3

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.

Answer 4

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.

Answer 5

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() .

Answer 6

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

Answer 7

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

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

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

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

• $ .mobile.loading (''mostrar'');
• $ .mobile.loading (''ocultar'');

Answer 8

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