JQTouch - Chaque fois que le chargement se produit, ajouter une classe de chargement?

Question

J'utilise jQTouch et jQTouch plusieurs des liens sont en cours de chargement via AJAX et puis en faisant glisser. Le problème est qu'il n'y a pas d'indication de chargement fournie aux utilisateurs.

Je voudrais un moyen d'ajouter une classe de chargement avec un spinner AJAX, chaque fois que l'un appel ajax est en cours de chargement, et ont la classe supprimée lorsque le chargement est effectué, et la page est affichée.

Toutes les idées?

Answer 1

Ceci est le comportement de base si vos liens sont li class = éléments « flèche ». comment vous affichez vos liens et où voulez-vous le chargement-fileur à l'affichage?

Answer 2

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

Le corps est trop général pour jQTouch, besoin d'être spécifique à la DIV page affichée

Answer 3

fonction

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

En bref - Ajouter div de chargement (id CHARGEMENTENCOURS à exmaple) juste avant l'appel ajax et de 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);
            }
        }
    });
}
...
}

pour div css 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 4

Merci pour vos différents messages. Ils me ont beaucoup aidé.

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

$(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 cette page doc jQuery .

Answer 5

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

Answer 6

Je viens de répondre à question de Darin Parker. Il suffit de vérifier qu'il peut vous aider.