I have code working in the latest Chrome and Firefox browsers.
IE9, however, hates me (and I feel the same way).
The specific error I get 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 a bit abnormal is that I manually download the latest jQuery 1.8.2) as follows:
// 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 do this is because I am writing against a very old web application and I cannot overwrite the window. $, so I am posting my application to the latest version of jQuery.
However, I made several console protocols and the correct version of jQuery IS, loading by the time the ajax call was attacked. app.$().jquery outputs "1.8.2"
EDIT
Well, I think I know part of the problem. I am doing similar code in two different ASP.Net UserControls (think an encapsulated web page). They both load jQuery 1.8.2 this way, because no one can be sure that the other exists. Firefox and Chrome seem to handle this fine, but IE somehow forces my onreadystatechange event to fire twice (and somehow one of them happens without the correct jquery version).
Is there anything I can do to modify this jquery download code to make sure this only happens once? I call it this way:
(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);