Mensaje de carga de Jquery Mobile 1.2RC-1 que no muestra

Question

Estoy tratando de mostrar, JQM 1.2 RC-1, cargando mensaje durante la inicial de la aplicación/inicio del sitio y cada vez que un usuario regresa a la página #index. Mi comprensión de la forma de hacerlo sería la siguiente, sin embargo, no está funcionando como esperaba. Esto no muestra el mensaje de carga.

$('body').on('pagebeforeshow', '#index', function(){ 

    $.mobile.loading('show') 

    $('#index ul li').remove() 

    var post_data = { 
     action: 'an_action', 
     method: 'method' 
    } 

    $.ajax({ 
     type: 'POST', 
     url: ajaxurl, 
     data: post_data, 
     cache: false, 
     dataType: 'text', 
     cache: false, 
     success: function(response) { 

      $('#index ul').append(response) 

      $('#index ul').listview('refresh') 

      $.mobile.loading('hide') 

     }, 
     error: function(jqXHR, textStatus, errorThrown) { 

      console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 


}) 

La solución que encontré aquí (stackoverflow) funciona para mostrar el mensaje de carga de la carga.

$('#index').live('pageshow', function(event) { //Workaround to show page loading on initial page load 

    $.mobile.loading('show') 

}) 

El problema que estoy experimentando es cuando puedo navegar de nuevo a la #index y el mensaje de carga es a veces retirados y otras veces se queda.

Si el mensaje de carga está activo y hago clic en un enlace para salir de la página actual, el mensaje de carga se elimina como se esperaba. Cuando regreso del mismo enlace al #index, el mensaje de carga a veces se elimina sin refrescar la página en el navegador.

¿Hay algún otro método para lograr el mensaje de carga en la carga inicial de la aplicación/sitio?

Otros detalles:

Probado en funcionamiento iDevice iOS 6 Safari y Chrome, Mac OS X Chrome, Safari, Firefox, Opera con los mismos resultados.

jQuery Mobile 1.2 RC-1

estoy usando plantilla de página única y la inyección de datos del servidor en listas a continuación, la transición a diferentes página # de identificación.

He intentado sin éxito:

$('#index').live('pageinit', function(event) { 

    $.mobile.loading('show') 

}) 

El .ajax $() con éxito se active y completó como puedo cambiar los datos del servidor y se cambia constantemente dentro de la aplicación.

Esto es confuso ya que $ .mobile.loading ('ocultar') también debe activarse y ocultar el mensaje de carga ya que la respuesta es exitosa. Esto me lleva a creer que no es un problema de almacenamiento en caché.

Answer 1

Esto es lo que hice, he añadido un div a mi contenido con class = "my_style" que se oculta al principio y cuando se muestre el mensaje showpageloading, estas son las dos funciones personalizadas para mostrar y lo ocultan:

function showCustomPageLoadingMsg(){ 
    $('.my_style').css('display','inline'); 
} 

function hideCustomPageLoadingMsg(){ 
    $('.my_style').css('display','none'); 
} 

y así es como me llama a las funciones: $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); y $.mobile.hideCustomPageLoadingMsg();

Otra diferencia entre el código y el suyo es que puse la llamada Ajax y el llamado que la función interior.vivir:

function test(){ 
    $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); 

$('#index ul li').remove() 

var post_data = { 
    action: 'an_action', 
    method: 'method' 
    } 

$.ajax({ 
    type: 'POST', 
    url: ajaxurl, 
    data: post_data, 
    cache: false, 
    dataType: 'text', 
    cache: false, 
    success: function(response) { 
     $.mobile.hideCustomPageLoadingMsg(); 
     $('#index ul').append(response) 

     $('#index ul').listview('refresh') 



     }, 
    error: function(jqXHR, textStatus, errorThrown) { 

     console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 

} 

$('#index').live('pageinit', function(event) { 

test(); 

}); 

agujeros de bucle en el código:

1. Una gran cantidad de código que falta un punto y coma al final de la línea de código ; Este es un delimitador estándar
2. Usted está ocultando su mensaje después de haber anexado el contenido html en su función de éxito. Esto se debe hacer antes de.
3. Por último, intente utilizar programación funcional para que pueda volver a utilizar el código en diferentes escenarios y, a la larga, si tiene que cambiar el código, realizará los cambios solo en un lugar.
4. Otra cosa es que con la programación funcional, puede introducir las variables que test() puede tomar y sustituirlas en la definición de prueba.

Happy hacking !!!