JQuery not working in IE 9.0.8, but works with dev tools open

Question

The following works in all browsers except IE 9.0.8. It loads a survey form within div with an ajax request.

$('.tab-content').on('click', '.show_survey_form', function(e) {
  e.preventDefault()
  target = $(this).attr("data-target")
  my_href = $(this).attr("href")
  console.log("load: " + target + "   target: " + my_href)
  // load: #survey_response_form_33   target: /surveys/33/survey_responses/edit_multiple

  // Don't make a request unless the form is opening.
  if ($(this).hasClass('collapsed')) {
    console.log("Making request!")
    //$(target).load(my_href)
    $(this).html(closeSurveyForm) // Just changes the language on the button
  } else {
    $(this).html(respondToSurvey) // Just changes the language on the button
  }
}

The .load is commented out during debugging. IE seems to have a problem using .hasClass in this context. It's used elsewhere with no issue.

The really odd part is that the moment I open the dev tools window, it starts working. It consistently doesn't work before then, and consistently works after hitting F12.

Other issues have said the hasClass method doesn't work when the class contains a \r char but that isn't the case here. I'm using jQuery 1.8.3.

Update: Changing the href to "#" and writing the URL into data-load had no effect. Still works in all browsers except IE 9.0.8.

Scrivings

just to be clear, it works in all browsers except IE9.0.8. Does that mean it works in other releases of IE9? What about IE8 or IE10? Is this really as version specific as you're implying, or is just that this is the version you're testing it with? – Ow

I would be willing to bet that the clue is in the bit where you say "it works as soon as I open dev tools F12". I think this is another case of old issue of console.log not working until F12 is opened. See this question for a full answer – Ow

It works in IE8 and IE 10. I haven't tested with other versions of IE9. – Scrivings

have you tried it without the console calls? because that bit about the dev tools makes it sound like a pretty classic case of the "console not defined" issue. – Ow

The goal is to get the ajax submit working, not console.log. Without dev tools open, the call is never submitted. With it open, the submit and response both work. I replaced the console calls with alerts and it's working. That tells me this may be a time of execution issue. Bootstrap makes the div available through the "collapse" functionality, then application.js relies on this to tell if the div is already open. If it checks before opening, it would fail to submit. – Scrivings

My point is that IE does not define the console object until F12 is opened, so if you have console.log in the code and don't open F12, then it will fail in exactly the way you describe. You're right that the console isn't the focus of the problem, and you're also right that using alert() instead has other issues when testing async code, but I think if you remove your debugging code entirely, it will work. If I'm wrong about that, then I don't know what the problem is, but post a jsfiddle example and I'll see if I can work it out (if I have time!). – Ow

console.log can fail, that's fine. I didn't even notice. Opening the dev tools put a small timeout in the call which is why it is succeeding. I've add the answer. – Scrivings

... And now I see what you mean. You can undelete your answer. Thanks! – Scrivings

hehe :) okay, done it. – Ow

Possible duplicate of Why does JavaScript only work after opening developer tools in IE once? – Armstrong

Answer 1

This has nothing to do with jQuery or hasClass(). It is entirely down to your use of console.log().

It is important to know that IE does not define the console object until the F12 dev tools window has been opened.

This means that before you open it, the console calls will be throwing javascript "object undefined" errors. This will make it appear that the code around it isn't working, but it's really just the fact that the console object is missing.

You may have similar effects in other older browsers, but most current browser versions do not do this -- they define the console object immediately, regardless of whether the dev tools is open or not. IE is the only exception.

You can get around this by either (a) not using console unless you are actually debugging and have the dev tools open, or (b) adding an if(console) check to all your console calls. This will prevent the error.

Further information here: Why does JavaScript only work after opening developer tools in IE once?

Ow

Thanks for this explanation, it helped me out as well :) – Parrie