title: IE9 throwing error on jQuery.ajax "done" method
body: <p>I've got code working in the latest Chrome and Firefox.<br>
  IE9 however hates me (and I feel the same).  </p>
  
  <p>The specific error I'm getting is:<br>
  <code>Object doesn't support property or method 'done'</code>  </p>
  
  <p>The code in question:  </p>
  
  <pre><code>app.$.ajax({
                  url: app.baseUrl + "Geos",
                  contentType: "application/json",
                  dataType: "json"
              }).done(function (data) {
                  app.controls.ddlGeos.html('');
  
                  for (var i = 0; i &lt; 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());
              });
  </code></pre>
  
  <p>Something that makes this slightly abnormal is that I am manually loading the latest version of jQuery 1.8.2) like this:  </p>
  
  <pre><code>// 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);
      }
  </code></pre>
  
  <p>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.<br>
  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.  <code>app.$().jquery</code> outputs <code>"1.8.2"</code>  </p>
  
  <p><strong>EDIT</strong><br>
  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).<br>
  Is there anything I can do to modify that jquery loading code to ensure it only happens once?  I'm calling it like this:  </p>
  
  <pre><code>(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);
  </code></pre>