Backbone Collection Fetch - Override ajax error handler with custom error handler

Question

I'm working within a complicated application structure, and I'm trying to do a better job at handling errors. Within the code there is a generic error handler defined which displays errors.

I would like my collection / model fetches to fail a little more politely, and display a nice error message. What's happening is that both are being fired, but I wish to mark the error as handled somehow so that it doesn't continue bubbling up.

Example in jsFiddle

// generic error handler
console.log("generic error");
$(document).on('ajaxError', function( event, xhr, settings ) {
    console.log("adding generic", xhr);
    $("#errorDiv").append("<div>Generic error: " + xhr.status + " " + xhr.statusText + "</div>");
});

console.log("define collection");
var TestCollection = Backbone.Collection.extend({
    url : "http://jsfiddle.net/Kieveli/wouoxsab"
});

console.log("fetch collection");
// fetch and provide default error
var tests = new TestCollection();
tests.fetch( {
   error: function(collection, response, options) {
      console.log("adding custom", response);
      $("#errorDiv").append("<div>Custom Error: " + response.status + "</div>");

      // How to stop generic ajaxError from firing??
      console.log("options", options);
  }
 });

Do you have any ideas on how to stop the generic error event from happening?

Answer 1

Typical fashion, I don't find the answer in 60 mins of searching, then find the answer 5 mins after posting:

Use global: false in the fetch options.

Javascript: How to stop multiple jQuery ajax error handlers?

http://api.jquery.com/Ajax_Events/

https://jsfiddle.net/Kieveli/wouoxsab/6/

tests.fetch( {
    global: false,
    error: function(collection, response, options) {
    console.log("adding custom", response);
    $("#errorDiv").append("<div>Custom Error: " + response.status + "</div>");

    // How to stop generic ajaxError from firing??
    console.log("options", options);
  }
 });