Jquery Mobile 1.2RC-1 messaggio di caricamento non visualizzato

Question

Sto tentando di mostrare, JQM 1.2 RC-1, il messaggio di caricamento durante l'applicazione iniziale/sito init e ogni volta che un utente torna alla pagina #index. La mia comprensione del modo di farlo sarebbe la seguente, tuttavia, non funziona come previsto. Questo non mostra il messaggio di caricamento.

$('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 soluzione che ho trovato qui (StackOverflow) funziona per mostrare il messaggio di caricamento in fase di caricamento.

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

    $.mobile.loading('show') 

}) 

Il problema che sto vivendo è quando a navigare di nuovo alla INDEX e il messaggio di caricamento è volte rimossi e altre volte rimane.

Se il messaggio di caricamento è attivo e faccio clic su un collegamento per lasciare la pagina corrente, il messaggio di caricamento viene rimosso come previsto. Quando torno dallo stesso link a #index il messaggio di caricamento viene a volte rimosso senza aggiornare la pagina nel browser.

Esiste un altro metodo per ottenere il messaggio di caricamento sull'applicazione iniziale/sul carico del sito?

Ulteriori informazioni:

Testato su iDevice in esecuzione Safari iOS 6 e Chrome, Mac OSX Chrome, Safari, Firefox, Opera con gli stessi risultati.

jQuery Mobile 1.2 RC-1

Sto usando modello di pagina singola e l'iniezione di dati del server in elenchi poi transizione a diversi pagina # id.

Ho provato senza successo:

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

    $.mobile.loading('show') 

}) 

Il $ .ajax() è successo di essere attivato e completato come posso cambiare i dati del server ed è sempre cambiato all'interno dell'applicazione.

Questo è confuso poiché il $ .mobile.loading ('nascondi') deve essere attivato e nascondere il messaggio di caricamento poiché la risposta è riuscita. Questo mi porta a credere che non si tratti di un problema di memorizzazione nella cache.

Answer 1

Questo è quello che ho fatto, ho aggiunto un div al mio contenuti con class = "my_style", che è inizialmente nascosto e quando viene visualizzato il messaggio showpageloading, queste sono le due funzioni personalizzate per visualizzare e nascondono:

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

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

e questo è come ho chiamato le funzioni: $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); e $.mobile.hideCustomPageLoadingMsg();

Un'altra differenza tra il mio codice e il vostro è che ho messo la chiamata AJAX e la chiamai quella funzione all'interno.vivere:

feritoie

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

}); 

nel codice:

1. un sacco di codice manca un punto e virgola alla fine della riga di codice ; Questo è un delimitatore di serie
2. Stai nascondendo la tua messaggio dopo aver aggiunto il contenuto html nella funzione di successo. Questo dovrebbe essere fatto prima del.
3. Infine, prova ad utilizzare la programmazione funzionale in modo da poter riutilizzare il codice in diversi scenari e, a lungo termine, se devi modificare il codice, eseguirai le modifiche solo in un punto.
4. Un'altra cosa è, con la programmazione funzionale, è possibile introdurre variabili che test() può prendere e sostituire nella definizione di test.

Happy hacking !!!