Javascript Misbehaving in IE until Dev Tools Opened - Not Console-Related?

Question

I am trying to resolve an odd javascript issue where a script works perfectly in all browsers - except IE, but works the moment you open the dev tools.

I have searched around and this is often due to IE not spawning the console object. However, there is no mention of console in the code and I have tried 5+ different codes that apparently prevent this problem, to no avail.

I'd appreciate some help figure this one out!

Code:

var slide = function slider() {
    var i = 0;
    var slider = {
      loop: function loop(data) {
        $.getJSON('?getdata=1', function(data) {
          var create = $('<div class="social-area pic">' + '<div class="socimgdiv">' + '<img class="socimg" src="' + data.pic + '">' + '<div class="infotxt">' + data.name + '<br><small>' + data.age + ', ' + data.country + '</small><br>' + '</div></div></div>'),
            maxTimeout = 4000,
            minimumTimeout = 1000;
          $('#box').prepend(create);
          $('.social-area').last().fadeOut(400);
          setTimeout(function() {
            $('.social-area').last().remove();
          }, 400);
          setTimeout(function() {
            $('.pic').animate({
              width: 'toggle'
            }, 350).removeClass('pic');
          }, 400);
          i += 1;
          if (i >= 5) {
            timeouter = Math.floor(Math.random() * maxTimeout);
            if (timeouter <= minimumTimeout) timeouter = minimumTimeout;
          } else timeouter = 400;
          setTimeout(function() {
            this.loop();
          }.bind(slider), timeouter);
        });
      }
    };
    slider.loop();
  };
slide();

The script collects data from a JSON feed which is generated via a PHP script included earlier:

if(isset($_GET['getdata'])){
  echo json_encode(array(
  'name' => $name,
  'gender' => $gender,
  'age' => $age,
  'country' => $mycountry,
  'pic' => $pic
)); exit;
}

This all works fine - exactly as expected in FF, Chrome, Safari and Opera - but not in IE 11 with the developer tools unopened.

Presumably there is some call or function that doesn't work before spawning the console object but I have no idea what it is!

What console work arounds have you tried? Also it could be a timing issue. You have dom generation mixed with waits and call backs, that is a recipe for weirdness with IE (atleast the older versions). Unfortunately with it being IE you may have to resort removing lines of code till you identify which line is the issue. I would start with the html generation. The other option is to use exception handling and alerts since using dev tools isn't an option. — Blue
– Blue, Commented Sep 16, 2014 at 0:42
To prove that this is not console related try adding this somewhere at the top of your script and see if it starts working in IE: if (typeof console == 'undefined') {console = {}}; if (!console.log) {console.log = function (){}}; — slebetman
– slebetman, Commented Sep 16, 2014 at 1:50
@Blue I tried about half a dozen different ones, all similar to the one posted by slebetman - I put them above this code (both in their own script tags or above the current script) to get it to check for the console object before the script in question tried to execute. I'm not familiar with debugging JS - could you provide some more info or a link so that I can figure out how to debug with exception handling without having to open the dev tools? — David
– David, Commented Sep 17, 2014 at 0:36
Exception handling is explained here w3schools.com/js/js_errors.asp. Debugging is alot more difficult, especially since you can't use the dev tools. What you can do for starters is put everything in a try catch and then either alert or print to an element the exception. I would also put some kind of print at key points and the exit point. That way you know what parts are executing correctly and what if any your exceptions are. To print to an element you can either grab something on the page and use a dom write or even open an entire new window that is strictly for debugging. — Blue
– Blue, Commented Sep 17, 2014 at 7:42
For a debug window you can run the following (mind popup blocking) var debugger = window.open(); debugger.document.write("<div>I through an error!!!</div>"). — Blue
– Blue, Commented Sep 17, 2014 at 7:50

subZero · Accepted Answer · 2014-09-19 09:06:31Z

6

This is because opening the developer console temporarily disable IE 11s caching mechanism when requesting an external file via the AJAX request.

Solve it by adding a simple timestamp so the request always appear to be fresh:

$.getJSON('?getdata=1&timestamp='+$.now(), function(data) {

Why you have to do this, you ask? Beats me. Maybe it lies within the realms of jQuery.

answered Sep 19, 2014 at 9:06

subZero

5,1867 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

Yup, can confirm this was the fix needed!

Collectives™ on Stack Overflow

Javascript Misbehaving in IE until Dev Tools Opened - Not Console-Related?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related