title: Spinner bound to ajax call will not display unless I put an alert in the javascript
body: <p>I wrote a simple method that adds a spinner to the main body of an html page and binds the  event to an ajaxstart method then removes it on the ajaxstop.</p>
  
  <pre><code>StartAjaxCallSpinner = function (spinnerObj) {    
      var $bod = $("Body");
      if ($('#bgSpinnerDiv')[0] == undefined &amp;&amp; $('#spinnerHolder')[0] == undefined) {
          $bod.append("&lt;div id='spinnerHolder' style='display:none;'&gt;&lt;/div&gt;&lt;div id='bgSpinnerDiv'&gt;&lt;/div&gt;");
      }
  
      $('#spinnerHolder')
              .hide()  
              .ajaxStart(function () {
                  $('#bgSpinnerDiv').css({ 'background-color': 'black',
                      'height': '100%',
                      'left': '0px',
                      'opacity': '0.7',
                      'position': 'fixed',
                      'top': '0px',
                      'width': '100%',
                      'z-index': '1000001'
                  });
                  $(this).css({ 'position': 'fixed',
                      'top': '50%',
                      'left': '50%',
                      'width': '130px',
                      'height': '130px',
                      'margin-top': '-65px',
                      'margin-left': '-65px',
                      'z-index': '1000002',
                      'display': 'block',
                      'border': '1px solid black',
                      'border-radius': '5px',
                      'background': " white url('" + spinnerObj.SpinnerUri + "') no-repeat center center"
                  });
                  $(this).show();
                  //alert('test');
              })
              .ajaxStop(function () {
                  $(this).hide();
                  $('#bgSpinnerDiv').removeAttr("style").unbind('ajaxStart', UnBindAjaxStop($('#bgSpinnerDiv')));
                  $(this).removeAttr("style").unbind('ajaxStart', UnBindAjaxStop(this));
              });
  };
  
  UnBindAjaxStop = function (me) {
      $(me).unbind('ajaxStop');
  };
  </code></pre>
  
  <p>I call the method before an ajax call and pass it an object with the uri of the spinner gif, but the spinner and background do not display unless I have an alert. I have tried adding a <code>setTimeout()function{/*do some code*/},1000)</code> in various places, but that did not seems to help. </p>
  
  <p>I saw a similar issue in <a href="https://stackoverflow.com/questions/16948037/jquery-show-within-page-fails-unless-alert-is-added-or-debug">this posting</a> but the setTimeout does not seems to help. Any ideas?</p>