title: Implementing global extendable / overridable ajax loader
body: <p>I'm currently displaying an ajax loading image whenever a jquery ajax request occurs like this:</p>
  
  <pre><code>$(document).ajaxStart(function () {
   $(".ajaxLoadingIndicator").show();
    });
  
  $(document).ajaxStop(function () {
    $(".ajaxLoadingIndicator").hide();
   });
  </code></pre>
  
  <p>I can put this in a global JS file and have it on every page. Now it would be smart to make this behavior overridable at certain points. A sub-view or page might execute additional logic or replace the current logic entirely. Currently I'm doing something like this:</p>
  
  <p>//global js file</p>
  
  <pre><code>var shsGlobal = new Globals();
  
  function Globals() {
  
  }
  
  Globals.prototype.ajaxLoaderStart = function () {
      $(".ajaxLoadingIndicator").show();
  }
  
  Globals.prototype.ajaxLoaderStop = function () {
      $(".ajaxLoadingIndicator").hide();
  }
  
  
  $(document).ajaxStart(function () {
  shsGlobal.ajaxLoaderStart();
  });
  
  $(document).ajaxStop(function () {
  shsGlobal.ajaxLoaderStop();
  });
  </code></pre>
  
  <p>And on a different page I might do sth like this:</p>
  
  <pre><code>   shsGlobal.ajaxLoaderStart = function () {
      //additional logic here...
  
      //base method
      Globals.prototype.ajaxLoaderStart.call();
  }
  </code></pre>
  
  <p>Since I'm not doing that much javascript I'm not sure if this isn't a bit wonky. It works, though.</p>