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.

eivers88 · Accepted Answer · 2013-03-20T00:36:24.560

51

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.

edited Mar 20 '13 at 00:36

answered Jun 21 '12 at 22:17

eivers88

6,207
1
33
34

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. – TheZ Jun 21 '12 at 22:18
3

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 :-) – Micha Roon Jun 21 '12 at 22:39
You are genius eivers88. Thanks a lot. I have been fighting this issue for a while. – Jonas T Nov 12 '12 at 04:17
2

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!! – Jez Nov 14 '12 at 16:02
Saved us a tone of time. Thanks. Microsoft is doing such a fantastic job with their products.... – Dimitris Dec 20 '12 at 16:10
I wish I could upvote you way more than once. Thank you for saving us an inordinate amount of time. – JRizz Oct 09 '13 at 13:41

score 2 · Answer 2 · edited Jun 21 '12 at 22:23

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.

edited Jun 21 '12 at 22:23

Ruan Mendes

90,375
31
153
217

answered Jun 21 '12 at 22:18

matt3141

4,303
1
19
24

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 – Ruan Mendes Jun 21 '12 at 22:20
@JuanMendes I'd rather not pollute the console if it's production code, though. – matt3141 Jun 21 '12 at 22:21
All other browsers already have a global console, it's not much pollution. Keeps your code from breaking when you forget them in there. – Ruan Mendes Jun 21 '12 at 22:24
1

I meant I'd rather users don't see my debugging output if they are to open the console on my website. – matt3141 Jun 21 '12 at 22:33
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. – Ruan Mendes Jun 21 '12 at 22:34

score 1 · Answer 3 · edited Mar 30 '15 at 17:00

1

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"

edited Mar 30 '15 at 17:00

Opal

81,889
28
189
210

answered Mar 30 '15 at 16:40

Ozbodd

73
8

score 0 · Answer 4 · answered Jan 17 '17 at 10:40

0

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

answered Jan 17 '17 at 10:40

user1436460

21
3

IE9 makes ajax call correctly only ofter hitting F12

4 Answers4

Linked