Abort pending AJAX requests before page unload

Abort all pending requests before the page unload, to avoid confusing error messages during page reloads. Avoid rendering the site unusable in cases where the site is still being used after the beforeunload event.

fixes #7759
This commit is contained in:
Matthias Jentsch 2015-05-19 16:35:44 +02:00
parent 0a8c9ad195
commit 94bdb8b4b0
2 changed files with 21 additions and 6 deletions

View File

@ -100,7 +100,7 @@
// Destroy Icinga, clean up and interrupt pending requests on unload
$( window ).on('unload', { self: this }, this.onUnload);
$( window ).on('beforeunload', { self: this }, this.onUnload);
$( window ).on('beforeunload', { self: this }, this.onBeforeUnload);
// We catch scroll events in our containers
$('.container').on('scroll', { self: this }, this.icinga.events.onContainerScroll);
@ -153,6 +153,15 @@
icinga.destroy();
},
onBeforeUnload: function (event) {
var icinga = event.data.self.icinga;
// Browsers may call the error handler on all pending AJAX requests, when the page is reloaded,
// which could in turn cause needless error messages to show up in the frontend until the page is loaded.
// To circumvent this cancel all pending requests.
icinga.loader.cancelRequests();
},
/**
* A scroll event happened in one of our containers
*/
@ -560,7 +569,7 @@
$(window).off('resize', this.onWindowResize);
$(window).off('load', this.onLoad);
$(window).off('unload', this.onUnload);
$(window).off('beforeunload', this.onUnload);
$(window).off('beforeunload', this.onBeforeUnload);
$(document).off('scroll', '.container', this.onContainerScroll);
$(document).off('click', 'a', this.linkClicked);
$(document).off('click', 'table.action tr[href]', this.rowSelected);

View File

@ -793,16 +793,22 @@
},
/**
* On shutdown we kill all pending requests
* Cancel and dereference all pending requests and dereference this object
*/
destroy: function() {
this.icinga.loader.cancelRequests();
this.icinga = null;
this.requests = {};
},
/**
* Cancel all pendings ajax requests
*/
cancelRequests: function() {
$.each(this.requests, function(id, request) {
request.abort();
});
this.icinga = null;
this.requests = {};
}
};
}(Icinga, jQuery));