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.

Oringas

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.

Edifice

If it runs without the console open it throws an error because, well, there is no console loaded. Why load one for regular browsing? Most people aren't devs. – Bullpen

I would never have thought of that!! how stupid of them, really. I guess one could argue about it, but I just lost a day on this shit. One thing is for sure, I wont forget that one :-) – Oringas

You are genius eivers88. Thanks a lot. I have been fighting this issue for a while. – Scots

AHHHHHHhhh this solved my problem too. LOL. I say this is a bad design decision by the Internet Explorer team - they could at least send console.log stuff to /dev/null if the dev window isn't open!! – Jillayne

Saved us a tone of time. Thanks. Microsoft is doing such a fantastic job with their products.... – Doctrine

I wish I could upvote you way more than once. Thank you for saving us an inordinate amount of time. – Yardley

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.

Lagasse

This is not very friendly, have to edit that line every time. How about if (!window.console) console = {log: function(){}, info: function(){}, warn;function(){}, error:function(){}} You could write your own implementation that outputs it somewhere on the page – Epic

@JuanMendes I'd rather not pollute the console if it's production code, though. – Lagasse

All other browsers already have a global console, it's not much pollution. Keeps your code from breaking when you forget them in there. – Epic

I meant I'd rather users don't see my debugging output if they are to open the console on my website. – Lagasse

That's very true, if you implement my first suggestion, with empty functions, then it won't happen, and you'll get no errors in IE without the debugger open, or your logging functions could detect that you're in production mode and do nothing. – Epic

Answer 3

I had this problem and I had all the console references commented out in the scripts, but it was still failing in IE only (11). I found the solution was to add cache false to my AJAX calls.

$.ajax({
        **cache: false,**
        type : 'GET',})

All my inputs have the attribute autocomplete="off"

Ante

Answer 4

really it saved my time, IN IE 11, we should put cache:false for get ajax to get resolved this issue

Grille