Bootstrap Modal Remote Source Error Handling

Question

We are using Bootstrap Modal window to display some html that is loaded via a remote source. We\'re doing this via the recommended way in the Bootstrap

Answer 1

For Bootstrap v3.3.7 , here is the solution I came up with based on Mark Fox's answer . Just find the " .load " section in your bootstrap js file, and make it look like this :

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

Substitute your own error message of course or whatever other code you need.

Answer 2

You may want to implement a Global Ajax Error Handler in your app, this will attach to every Ajax request that is performed, implementation would look something like this:

$( 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
  }
});

You can read more about Global Ajax Handlers here

Answer 3

Currently the Github repo ( /js/modal.js ) contains this fragment in the modal plugin definition:

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

Which indicates that no callback is used, the result of the request is directly assigned to the dom element being worked on.

From the docs jQuery.load:

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

Later in the doc there is a code snippt that describes how to detect a failure with 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);
  }
});

It seems the Twitter team opted to not handle the error.

Maybe it's time to start an issue, it seems like a "mobile first" library would want to handle this kind of thing gracefully ;-) https://github.com/twbs/bootstrap/issues