Обработчик jQuery ajaxError () срабатывает, если пользователь покидает страницу до ее загрузки - PullRequest
Новая
       208

Обработчик jQuery ajaxError () срабатывает, если пользователь покидает страницу до ее загрузки

24 голосов
/ 15 декабря 2009

Мы используем глобальный обработчик jjuery ajaxError (), чтобы предупредить пользователя о любых сбоях 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"); } }  
    });  
});

К сожалению, этот глобальный обработчик ошибок также срабатывает, если пользователь покидает страницу до того, как она закончит загрузку. Вот шаги для воспроизведения ошибки:

  1. Пользователь посещает страницу A, которая включает элементы, которые загружаются через AJAX.
  2. Элементы AJAX на странице A начинают загрузку.
  3. Пользователь нажимает ссылку, чтобы посетить страницу B до того, как Элементы AJAX на странице A завершат загрузку.
  4. Диалоговое окно ошибки появляется на короткое время, прежде чем браузер перенаправляет на страницу B.

Есть идеи, как заставить ajaxError () не срабатывать, когда ошибка вызвана непосредственно пользователем, посещающим новую страницу?

ОБНОВЛЕНИЕ: Вот мой код сейчас, после включения предложений в комментариях: 

// 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!";
    }
};

Ответы [ 2 ]

15 голосов
/ 15 декабря 2009

Ну да, если пользователь переходит на другую страницу, xhr прервет работу, что, по сути, будет неудачным соединением. Решением было бы зарегистрировать прослушиватель для события onbeforeunload и отменить привязку ajaxError там, по сути говоря: пользователь собирается покинуть страницу, поэтому я не хочу получать информацию об ошибках ajax, которые могут последовать.

Однако некоторые сайты, такие как GMail, делают наоборот: если вы пытаетесь отойти от страницы, пока еще есть ожидающие запросы ajax, вы получите подсказку, в которой говорится, что некоторые процессы еще запущены. и позволяет пользователю решать, оставаться ли на сайте до тех пор, пока запрос не будет завершен, или продолжить работу и уйти.

10 голосов
/ 04 сентября 2012

Основываясь на приведенном выше ответе Дэвида Хедлунда, вот код, который работает для меня: 

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

Я получил спецификацию 'ajaxError' в разделе комментариев jquery ajaxError документации . Мне пришлось привязать beforeunload к $(window), чтобы поддерживать хром (IE отлично работал с документом). .ajaxError не сработало, когда я связывался с $(window), поэтому у меня есть это решение для окна / документа.

...