jQuery feux de gestionnaire ajaxError () si l'utilisateur quitte la page avant la page se termine le chargement

Question

Nous utilisons gestionnaire ajaxError () global de jQuery pour alerter l'utilisateur de toute défaillance AJAX:

$(document).ajaxError(function() {  
    $("There was a network or server error. Please try again later.").dialog({  
        title: "Error",  
        modal: true,  
        resizable: false,  
        buttons: { 'Ok': function() { (this).dialog("close"); } }  
    });  
});  

Malheureusement, ce gestionnaire d'erreur global déclenche également si l'utilisateur quitte la page avant qu'elle ne se termine le chargement. Voici les étapes pour reproduire l'erreur:

1. visites de l'utilisateur Page A, qui comprend des éléments qui se chargent via AJAX.
2. éléments AJAX sur la page A commencer le chargement.
3. L'utilisateur clique sur un lien pour visiter la page B avant éléments AJAX sur la page A ont fini de se charger.
4. La boîte de dialogue d'erreur apparaît brièvement avant que le navigateur redirige vers la page B.

Toute idée de comment nous pouvons obtenir ajaxError () ne pas déclencher lorsque l'erreur est directement causée par l'utilisateur visite une nouvelle page?

Mise à jour: Voici mon code maintenant, après avoir intégré les suggestions dans les commentaires:

// I added a 3 second delay to our error dialog, enough time
// for the user to leave for a new page:
$(document).ajaxError(function() {
    setTimeout(my_error_handler, 3000);
});

// Warn user before leaving page if AJAX is still loading.
// Not sure I'll keep this:
$(document).ajaxStart(function() {
    ajaxing = true;
});

$(document).ajaxStop(function() {
    ajaxing = false;
});

window.onbeforeunload = function() {
    if (typeof(ajaxing) != 'undefined' && ajaxing) {
        return "Page elements are still loading!";
    }
};

Answer 1

Eh bien oui, si l'utilisateur accède à une autre page, le XHR abandonnera, ce qui est, en effet, une communication sans succès. Une solution serait d'enregistrer un écouteur pour l'événement onbeforeunload et unbind ajaxError là, en disant essentiellement:. L'utilisateur est sur le point de quitter la page, donc je ne veux pas être informé des erreurs ajax qui pourraient suivre

Certains sites, bien que, comme GMail, font l'inverse: si vous essayez de naviguer loin de la page alors qu'il ya encore des demandes en attente ajax, il vous donne une invite qui dit que vous avez des processus en cours d'exécution encore et permet à l'utilisateur de décider si de rester sur le site jusqu'à ce que la demande est terminée, ou pour aller de l'avant et de naviguer loin.

Answer 2

Sur la base de la réponse de David Hedlund ci-dessus voici le code qui fonctionne pour moi:

//enable global ajax error handling
$(document).ajaxError(function (event, request, settings) {
    //your error handling code here
});

//user leaving page so ignore any unfinished ajax loads
$(window).bind('beforeunload', function () {
    $(document).unbind('ajaxError');
});

Je suis la spécification 'ajaxError' de la section des commentaires de jquery ajaxError documentation . Je devais lier beforeunload à $(window) afin de soutenir le chrome (IE fonctionnait très bien avec le document). .ajaxError n'a pas le feu quand je se liant à $(window) donc c'est pourquoi j'ai cette fenêtre / solution de document.