Ajax Custom Error

How to apply a custom error that stops the generic error from displaying

by Kieveli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.0/backbone-min.js"></script>
<h1>Ajax Custom Error</h1>
<div id="errorDiv">
</div>

JavaScript

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