web-dev-qa-db-fra.com

JQuery Mobile 1.3.1 "$ .mobile.loading" ne fonctionne pas

J'ai le code suivant:

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

J'utilise Jquery Mobile 1.3.1 et teste ce code dans mozilla firefox et google chrome pour le moment. Je vais l'utiliser plus tard dans une application phonegap.

Je charge un JSON et l'affiche à l'écran dans une liste. Pendant le chargement, je veux que le programme affiche un "chargement en rotation". Le journal de la console indique que ajaxStart est en train de s’activer, mais il n’ya pas de viseur visuel sur l’écran.

Qu'est-ce que je fais mal? S'il vous plaît aider!

Merci d'avance.

javascriptjquerycss3cordovajquery-mobile-loader
14
pguimera

Dans la documentation de jQuery Mobile, il manque des informations concernant l'exécution réussie de:

$.mobile.loading('show');

et 

$.mobile.loading('hide');

Ils montrerontUNIQUEMENTpendant l'événementpageshow. Dans tous les autres cas, vous devez les envelopper danssetinterval, comme ceci:

Au cas où vous ne sachiez rien à propos depageshowet du reste des événements de la page jQuery Mobile, consultez cet article,, il s'agit de mon blog personnel. Ou trouvez-leICI.

Tout d'abord, vous ne pourrez pas afficher/masquerAJAXloader sans intervalle défini. Il n'y a qu'une seule situation où cela est possible sans et c'est pendant l'événementpageshow. Dans tous les autres cas,setintervalest nécessaire pour lancer le chargeur.

Voici un exemple de travail: 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);
50
Gajotres

Envelopper dans setTimeout fonctionne. J'ai juste une fonction simple pour le faire:

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

Ensuite, appelez-le lorsque vous souhaitez afficher ou masquer le compteur:

loading('show');

ou

loading('hide');

Voici un idiot jsfiddle: http://jsfiddle.net/7UpW5/

17
matt burns

À l'intérieur de AJAX appel? (mais fonctionnera n'importe où)

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

Et la fonction elle-même:

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

le code pour le les autres réponses n'ont pas fonctionné pour moi et n'est pas complet (par exemple, si vous aimez passer éventuellement les paramètres ou utilisez simplement booléen true/false pour basculer. Voici une bonne façon de procéder:

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

utilisez-le comme ceci:

showLoading( true );  // show loader
showLoading( false );  // hide loader
0
Andreas Dietrich