JQTOUCH - Chargement en cours, ajouter une classe de chargement?

Question

J'utilise JQTOUCH et dans JQTOUCH plusieurs liens sont en cours de chargement via AJAX, puis glissent. Le problème est qu'il n'y a aucune indication de chargement fournie aux utilisateurs. Je voudrais un moyen d'ajouter une classe de chargement avec un spinner AJAX, lorsque l'appel ajax est en cours de chargement, et que la classe soit supprimée lorsque le chargement est terminé, et la page est affichée.

Des idées?

Answer 1

Ceci est le comportement de base si vos liens sont des éléments li class = "arrow". Comment affichez-vous vos liens et où voulez-vous que le spinner de chargement s'affiche?

Answer 2

La fonction showPageByHref() dans jqtouch js est un bon début. Je l'ai ajouté à droite dans l'appel ajax donc l'attente s'il vous plaît ne clignotera pas lorsque vous cliquez sur le lien qui est déjà chargé, etc.

En bref - ajouter le chargement div (id loadinginprogress dans exmaple) juste avant l'appel ajax et supprimer plus tard " succès "ou" erreur ". la section d'appel ajax ressemblerait à quelque chose comme ça (raccourci il):

 
function showPageByHref(href, options) { 
... 
if (href != '#'){ 
    $('body').append('<div id="loadinginprogress">Loading...</div>'); 
    $.ajax({ 
     url: href, 
     data: settings.data, 
     type: settings.method, 
     success: function (data, textStatus) { 
      $('#loadinginprogress').remove() 
      var firstPage = insertPages(data, settings.animation); 
      if (firstPage) 
      { 
       if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer) 
       { 
        settings.$referrer.attr('href', '#' + firstPage.attr('id')); 
       } 
       if (settings.callback) { 
        settings.callback(true); 
       } 
      } 
     }, 
     error: function (data) { 
      $('#loadinginprogress').remove() 
      if (settings.$referrer) settings.$referrer.unselect(); 
      if (settings.callback) { 
       settings.callback(false); 
      } 
     } 
    }); 
} 
... 
} 

css pour div de chargement serait quelque chose comme:

 
#loadinginprogress { 
    -webkit-border-radius: 10px; 
    background-color: rgba(0,0,0,.5); 
    color: white; 
    font-size: 18px; 
    font-weight: bold; 
    height: 80px; 
    left: 60px; 
    line-height: 80px; 
    margin: 0 auto; 
    position: absolute; 
    text-align: center; 
    top: 120px; 
    width: 200px; 
    z-index: 5000; 
} 

Answer 3

Vous pouvez ajouter un gestionnaire d'événements personnalisé et déclencher le chargement. gif à chaque fois que le clic sur l'élément spécifique a été fait.

Answer 4

La réponse showPageByHref() est partiellement correcte.

Mais, au lieu de

$('body').append('<div id="loadinginprogress">Loading...</div>'); 

Vous avez besoin

$('.current').append('<div id="loadinginprogress">Loading...</div>'); 

corps est trop général pour jQTouch, doivent être spécifiques à la DIV page affichée

Answer 5

Je viens de répondre Darin Parker question. Il suffit de le vérifier, il peut vous aider.

Answer 6

Nous vous remercions de vos différents articles. Ils m'ont beaucoup aidé.

J'ai une solution à proposer sans patcher le code jQtouch sur lequel s'appuie jQTouch. Il utilise les capacités jQuery ajax.

$(document).ready(function() { 
... 
    $('#jqt').ajaxStart(function() { 
    console.log("ajaxStart"); 
    ... 
    }).ajaxSuccess(function() { 
    console.log("ajaxSuccess"); 
    ... 
    }).ajaxError(function() { 
    console.log("ajaxError"); 
    .... 
    }); 
.... 
}); 

plus de détails disponibles dans this jQuery doc page.