IE9 makes ajax call correctly only ofter hitting F12

Question

I have this jQuery code in my JSP page (jQuery 1.7.2) :

   function Header() {
      this.add = function ( parentDiv, leftToolbar, rightToolbar ) {
         hbHeader = Handlebars.compile( $( "#hb-header" ).html() );

         $( parentDiv ).html( hbHeader( {user:{tenantDescription:"", firstName:"", lastName:""},
            leftTB:null, rightTB:null } ) );

         $.ajax( {
            url:"${pageContext.request.contextPath}/services/login/sessionUser",
            type:"POST",
            async:true,
            success:function ( result ) {
               app.user = result;
               var ltHtml;
               var rtHtml;
               if ( leftToolbar ) {
                  ltHtml = new Handlebars.SafeString( leftToolbar );
               }
               if ( rightToolbar ) {
                  rtHtml = new Handlebars.SafeString( rightToolbar );
               }
               $( parentDiv ).html( hbHeader( {user:app.user,
                  leftTB:{
                     html:ltHtml,
                     hidden:leftToolbar == null
                  },
                  rightTB:{
                     html:rtHtml,
                     hidden:rightToolbar == null
                  }
               } ) )
            },
            error:function( jqXHR, textStatus, errorThrown ) {
               alert("error in ajax");
            }
         } );
      }
   }

before this code is executed, an ajaxSend and an ajaxError listener are registered. Like so:

  $( "#log-window" ).ajaxSend( function ( event, jqXhr, ajaxOptions ) {
     console.log( "handling an ajax request adding username and password to the header" );
     jqXhr.setRequestHeader( 'username', $.cookie( 'username' ) );
     jqXhr.setRequestHeader( 'password', $.cookie( 'password' ) );
  } );
  $( "#log-window" ).ajaxError( function ( errorThrown, xhr, failedReq, textStatus ) {
     alert("error in "+failedReq.url);
     if ( textStatus == 'timeout' ) {
        if ( !failedReq.tryCount ) {
           failedReq.tryCount = 1;
           failedReq.retryLimit = 3;
        }
        if ( failedReq.tryCount++ <= failedReq.retryLimit ) {
           //try again
           $.ajax( failedReq );
           return;
        }
        throw 'Es wurde ' + failedReq.retryLimit + ' Mal versucht. Die Verbindung scheint nicht zu funktionieren.';
        return;
     }
     if ( xhr.status == 500 ) {
        if ( $.cookie( 'pageRefreshed' ) == null ) {
           $.cookie( 'pageRefreshed', 'true', { expires:10000 } );
           location.reload();
        }
        throw 'Der Server hatte ein Problem. Bitte melden Sie den Fehler and den Systemadministrator';
     } else if ( xhr.status == 401 ) {
        if ( failedReq.url != "${pageContext.request.contextPath}/services/login" ) {
           var loginData = {
              username:$.cookie( 'username' ),
              password:$.cookie( 'password' )
           };
           loginAttempt( failedReq, loginData );
        }
     } else {
        throw 'Oops! There was a problem, sorry.';
     }
  } );

The whole page can be accessed under http://alpha.sertal.ch:8181/VisionWeb/data-details/#data:12300923

You can even login if you like. User: alsoft03 Password: password

What should happen when the ajax call is made the first time, is a 401 error because the user is not logged in; and this is where IE fails. The ajaxSend listener is called but the ajaxError is not. If I set an error callback on the $.ajax itself it is not called either.

when I open the page with a real browser (Firefox, Chrome, Opera) it works fine and asks for a password. IE does not unless you press F12, in which case the site works as expected too.

It is really weird. You load the page with the console open and it works. With the console closed it does only show an empty header. Once the page has been loaded, you can close the console and it will continue to load.

I tested this on various machines and got the same result.

It drives me crazy. I can not debug because if I open the debugger with F12, it works fine.

I know the ajax callback is not made because I put alert("I got so far") lines at various positions.

If someone has a clue, it is very welcome.

Answer 1

All instances of console.log() need to be removed from your script in order for it to work in IE9 without it being in developer mode.

UPDATE I'm glad this answer has helped a few people. Just thought I'd update this answer with a simple solution I have been using from HTML5 Boilerplate:

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

Place this before your code and it should help you avoid any console errors in browsers that lack a console.

Answer 2

console.log is undefined outside of developer mode in IE. I like to just make a variables

var console = {log: function(){}};

for when I'm not debugging.