Bootstrap Modal Remote Source Error Handling
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
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.
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