Question

I’ve got code working in the latest Chrome and Firefox.
IE9 however hates me (and I feel the same).

The specific error I’m getting is:
Object doesn't support property or method 'done'

The code in question:

app.$.ajax({
                url: app.baseUrl + "Geos",
                contentType: "application/json",
                dataType: "json"
            }).done(function (data) {
                app.controls.ddlGeos.html('');

                for (var i = 0; i < data.d.length; i++) {
                    var geo = data.d[i];
                    var option = $(document.createElement("option"));

                    option.attr('value', geo.code);
                    option.html(geo.name);

                    app.controls.ddlGeos.append(option);
                };
            }).fail(function (xhr, status) {
                console.log("Error retrieving Geo list", xhr, status);
            }).always(function (data, status, xhr) {
                app.controls.ddlGeos.parent().find('#geo_ajax_image').remove();
                app.setSelectedValues(app.controls.ddlGeos, app.controls.hdnGeo.val());
            });

Something that makes this slightly abnormal is that I am manually loading the latest version of jQuery 1.8.2) like this:

// The following code allows us to run jQuery 1.8.2 independantly of the main jQuery
    if (!jq) {
        var script = document.createElement("script");
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
        script.onload = script.onreadystatechange = function () {
            window.jq18 = jQuery.noConflict(true);
            app.init(window.jq18);
        };
        document.body.appendChild(script);
    } else {
        app.init(jq);
    }

The reason I am doing this is because I’m writing against a very old web app and I can’t overwrite window.$ so I’m sending my app the newest jQuery version.
However, I have done some console logging and the correct version of jQuery IS being loaded by the time the ajax call has been hit. app.$().jquery outputs "1.8.2"

EDIT
Ok, I think I know part of the problem. I’m doing similar code in 2 different ASP.Net UserControls (think encapsulated web page). They BOTH are loading jQuery 1.8.2 this way because neither can be sure the other exists. It seems like Firefox and Chrome handle this ok, but IE is somehow causing my “onreadystatechange” event to fire twice (and somehow one of them is happening without the proper version of jquery).
Is there anything I can do to modify that jquery loading code to ensure it only happens once? I’m calling it like this:

(function (jq) {
    // All my "app" code here
    app = {
        init : function($) {
            app.$ = $ || window.$;
            // Other code
        }
    };

    if (!jq) {
        var script = document.createElement("script");
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
        script.onload = script.onreadystatechange = function () {
            window.jq18 = jQuery.noConflict(true);
            app.init(window.jq18);
        };
        document.body.appendChild(script);
    } else {
        app.init(jq);
    }
})(window.jq18);

Answer 1

IE9 seems to have readyStates such as "uninitialized", "loading" and "complete". The transitions between these seem to fire onreadystatechange in IE. The onload is eventually also fied, so you’re initializing everything several times. I’m not sure how that causes the weird return value of $.ajax, but apparently removing it fixes it.