Inconsistent IE behavior jQuery getScript

Question

Some ajax issues here in IE9, using jQuery. I currently call jQuery's getScript() from a JavaScript file that is loaded with the page from a <script>. This loads some JSONP data to the window object, then executes a function to parse its members as <option>s in a <select>. (This all works fine in Chrome and Firefox.)

In IE9, however, the getScripts are not callbacking at all (or even demonstrably being called), leaving the page in a half-loaded state. There is also a function that calls the three relevant getScript()s called piGetScripts() which I have tried to make callable by user-click after a certain amount of time has passed, but clicking the element for this does not call it (but will call any alert()s inside of it).

Strangely, if I open the IE JavaScript console and then click the element again, the call succeeds. From that point onward, on subsequent page loads (Ctrl+R) and until the browser is closed, the page loads properly (as it does Chrome and Firefox). The call also occurs properly if the page is loaded with the console open.

Has anyone encountered this before?

I would love to discover the reason for this obscure behaviour.

Answer 1

Following my own comment :

I've seen the behaviour, although it had nothing to do with jQuery. When you call console from JavaScript, then it throws an exception unless you open Developer Tools, which initializes console object and it works afterwards. It might be the case. If you are not using console, then I do not know what's happening (although you may give us some more details: the actual code + jQuery version). Good luck!

It seems that indeed that was the case. Good. I would like to give you some more advice about debuging. You can (and should) create your own class for handling debuging. For example this can be one option:

function Debuger() {
    var self = this;
    self.cache = [];

    self.dump = function() {
        if (window.console && window.console.log) {
            var l = self.cache.length;
            for (var i = 0; i < l; i++)
                window.console.log.apply(window.console, self.cache[i]);
            self.cache = [];
            /* We have console, we can deactivate monitor... */
            self.deactivate();
            /* ...and even redefine log! */
            self.log = function() {
                window.console.log.apply(window.console, arguments);
            };
        }
    };

    self.log = function() {
        var args = arguments;
        self.cache.push(args);
        self.dump();
    };

    self.monitor_fn = function() {
        self.dump();
    };

    self.activate = function() {
        self.monitor = setInterval(self.monitor_fn, 1000);
    };

    self.deactivate = function() {
        clearInterval(self.monitor);
        self.monitor = null;
    };
}

Simply use it like this:

debuger = new Debuger();
debuger.activate();
debuger.log('Test');

It should work under any browser (didn't test it, though) and if console object is created, then it will dump cached messages to it. Obviously you should customize it to your own needs.