Question

我们正在使用Bootstrap Modal window来显示通过远程源加载的一些html。我们通过Bootstrap文档中的推荐方式，使用选项remote并将其传递给url来执行此操作。（如here所述）

例如：

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

我的问题：在index.html不可用的情况下是否可以处理错误？

我在文档中没有看到任何答案。

我知道这应该很少发生，但是如果有人连接缓慢或参差不齐，我宁愿向他们展示一个错误，而不是只挂一个空模态。

Answer 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处理程序here

的更多信息

Answer 2

目前Github repo（/js/modal.js）在模态插件定义中包含此片段：

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

表示没有使用回调，请求的结果直接分配给正在处理的dom元素。

来自文档jQuery.load：

此方法是从服务器获取数据的最简单方法。它是大致相当于$ .get（url，data，success），除了它是一个方法而不是全局函数，它有一个隐式回调功能。当检测到成功的响应时（即textStatus时）是“成功”或“未修改”）,. 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

Answer 3

对于Bootstrap v3.3.7，这是我根据Mark Fox的回答得出的解决方案。只需在您的bootstrap js文件中找到“ .load”部分，并使它看起来像这样：

 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))
}

当然可以用您自己的错误消息或任何其他所需的代码代替。

Bootstrap模态远程源错误处理

3 个答案: