Обработка ошибок исходного модуля Bootstrap Modal

Мы используем Bootstrap Modal window для отображения некоторого HTML, который загружается через удаленный источник. Мы делаем это рекомендованным способом в документации Bootstrap, используя опцию remote и передавая ему url. (Как описано здесь)

Например:

$('#id').modal({remote:'index.html'});

Мой вопрос: возможно ли обработать ошибку в случае, если index.html недоступен?

Я не вижу ответа в документации.

Я знаю, что это случается редко, однако, если у кого-то медленное или пятнистое соединение, я бы лучше показал им ошибку, чем просто зависал с пустым модалом.

Ответы

Ответ 1

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

$( document ).ajaxError(function( event, jqxhr, settings, exception ) {
  //Since this handler is attach to all ajax requests we can differentiate by the settings used to build the request
  if ( settings.url == "index.html" ) {
    //Handle error
  }
});

Подробнее о глобальных обработчиках Ajax здесь

Ответ 2

В настоящее время репозиторий Github (/js/modal.js) содержит этот фрагмент в определении модального плагина:

…
if (this.options.remote) this.$element.load(this.options.remote)
…

Что означает, что обратный вызов не используется, результат запроса напрямую присваивается обрабатываемому элементу dom.

Из документов jQuery.load:

Этот метод является самым простым способом получения данных с сервера. это примерно равный $.get(url, data, success), за исключением того, что это а не глобальную функцию и имеет неявный обратный вызов функция. Когда обнаружен успешный ответ (т.е. Когда textStatus "success" или "notmodified" ),.load() устанавливает HTML-содержимое согласованный элемент с возвращенными данными.

Позже в документе есть код snippt, который описывает, как обнаружить сбой с load:

$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

Кажется, что команда Twitter отказалась обрабатывать эту ошибку.

Возможно, пришло время для начала проблемы, похоже, что "первая мобильная библиотека" хотела бы грамотно обрабатывать такие вещи;-) https://github.com/twbs/bootstrap/issues

Ответ 3

Для Bootstrap v3.3.7 вот решение, которое я придумал, основываясь на ответе Марка Фокса. Просто найдите раздел ".load" в вашем js файле начальной загрузки и сделайте так:

 if (this.options.remote) {
  this.$element
    .find('.modal-content')
    .load(this.options.remote, $.proxy(function (response, status, xhr) {
      if (status == 'error') {
        this.$element.find('.modal-content').html('<h1>Error</h1>'+response);
      }
      this.$element.trigger('loaded.bs.modal');
    }, this))
}

Замените ваше собственное сообщение об ошибке или любой другой код, который вам нужен.