jQuery Mobile 1.3.1 "$ .mobile.loading" nicht funktioniert

Question

Ich habe den folgenden Code:

HTML:

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/> 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery.mobile-1.3.1.min.js"></script> 

JS:

$(document).on({ 
    ajaxStart: function() { 
    $.mobile.loading('show'); 
    console.log('getJSON starts...'); 
    }, 
    ajaxStop: function() { 
    $.mobile.loading('hide'); 
    console.log('getJSON ends...'); 
    }  
}); 

I benutze Jquery Mobile 1.3.1 und teste diesen Code im Moment in Mozilla Firefox und Google Chrome. Ich werde es später in einer Phonegap-App verwenden.

Ich lade ein JSON und zeige es auf dem Bildschirm in einer Listview. Während es geladen wird, möchte ich, dass das Programm einen "Lade-Spinner" anzeigt. Das Konsolenprotokoll zeigt, dass ajaxStart ausgelöst wird, aber es gibt keinen visuellen Spinner irgendwo auf dem Bildschirm.

Was mache ich falsch? Bitte Hilfe!

Vielen Dank im Voraus.

Answer 1

Was jQuery Mobile Dokumentation Informationen zur erfolgreichen Durchführung fehlt:

$.mobile.loading('show'); 

und

$.mobile.loading('hide'); 

Sie NUR während der pageshow Veranstaltung zeigen. In jedem anderen Fall müssen Sie sie in die setinterval, wie diese wickeln:

Falls Sie wissen nichts über pageshow und Rest von jQuery Mobile Seite Ereignisse nehmen einen Blick auf diese ARTICLE, Es ist mein persönlicher Blog. Oder finden Sie es HERE.

Zunächst können Sie AJAX Loader ohne festgelegtes Intervall nicht ein-/ausblenden. Es gibt nur eine Situation, in der dies ohne und das ist während der pageshow Ereignis möglich ist. In jedem anderen Fall wird setinterval benötigt, um den Lader zu starten.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/Gajotres/Zr7Gf/

var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  

    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  

Answer 2

es in setTimeout Werke Verpackung.Ich habe nur eine einfache Funktion, es zu tun:

function loading(showOrHide) { 
    setTimeout(function(){ 
     $.mobile.loading(showOrHide); 
    }, 1); 
} 

Dann einfach es nennen, wenn Sie den Spinner anzeigen oder ausblenden möchten:

loading('show'); 

oder

loading('hide'); 

Hier ist eine dumme jsfiddle : http://jsfiddle.net/7UpW5/

Answer 3

der Code für die andere Antworten funktionierte nicht für mich und ist nicht vollständig (z.B. Wenn Sie möchten übergeben Sie schließlich Parameter oder verwenden Sie einfach boolean true/false zum Umschalten. Im Folgenden wird eine schöne Möglichkeit, dies zu tun:

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */ 
function showLoading(on, params) { // on: true|false 
    setTimeout(function() { 
     if (on) 
     $.mobile.loading("show", params); 
     else { 
     //$.mobile.loading("hide"); // does not seem to work (e.g. using with GWT and jQM 1.4.3) 
     $('.ui-loader').remove(); // removes the loader div from the body 
     }  
    }, 1); 
} 

es wie folgt verwendet werden:

showLoading(true); // show loader 
showLoading(false); // hide loader 

Answer 4

Innen AJAX nennen? (Aber überall arbeiten)

$.ajax({ url: ..., 
    type:'post', dataType:'json', 
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); }, 
    complete: function(){ fSpinner('hide'); }, 
    success: function(res){...}, 
    error: function(e){ alert('Error: ' + e.responseText) } 
}); 

und die Funktion selbst:

function fSpinner(strShowOrHide) { 
    setTimeout(function(){ 
     $.mobile.loading(strShowOrHide); 
    }, 1); 
}