12

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

例如：

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

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

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

我知道这应该很少发生，但是如果有人的连接速度很慢或不稳定，我宁愿向他们展示一个错误，而不是仅仅挂在一个空的模式上。

4

3 回答 3

6

您可能希望在您的应用程序中实现一个全局 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 处理程序的更多信息

于 2013-08-27T05:46:55.107 回答
5

目前 Github repo ( /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 内容设置为返回的数据。

稍后在文档中有一个代码片段，描述了如何检测故障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

于 2013-08-27T05:09:07.023 回答
1

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

当然，请替换您自己的错误消息或您需要的任何其他代码。

于 2019-01-16T22:58:05.607 回答