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 docs, by using the option remote and passing it a url. (As described here)

For example:

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

My question: Is it possible to handle an error in the case that index.html is not available?

I don't see any answer in the documentation.

I know this should rarely happen, however if someone has a slow or spotty connection, I'd rather show them an error than to just hang with an empty modal.

Answer 1

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