Question

When mousing over an image in a jcarousel, my site displays a popup whose contents are loaded via ajax. I’m doing what I thought was fairly straightforward; keeping a handle to the xhrRequest object, and aborting the existing one before making a new request.

It works great in all browsers except IE, where I receive an error “Object doesn’t support this property or method”

Here’s the code that is triggering it:

function showPopup {
  // ... code snipped ...

  // cancel the existing xhr request
  if (showPopup.xhrRequest != null) {
    showPopup.xhrRequest.abort();
    showPopup.xhrRequest = null;
  }

  showPopup.xhrRequest = $.ajax({url: url, 
                                 type: "GET",
                                 success:function(data) {
                                   $("#popup-content").html(data);
                                 }
                                });

  // ... code snipped ...
}
showPopup.xhrRequest = null;

Works great in Firefox and Chrome. I traced the error down to this bit of code in jquery.js inside the ajax function (line 5233 in my copy of jQuery):

// Override the abort handler, if we can (IE doesn't allow it, but that's OK)
// Opera doesn't fire onreadystatechange at all on abort
try {
  var oldAbort = xhr.abort;
  xhr.abort = function() {
    if (xhr ) {
      oldAbort.call( xhr );
    }

  onreadystatechange( "abort" );
} catch(e) { }

The specific error occurs on the oldAbort.call( xhr ) line. Any ideas?

Answer 1

Found the answer to this on the jquery forums. See discussion here:
http://forum.jquery.com/topic/object-doesn-t-support-this-property-or-method-from-jquery-1-4-1-in-ie7-only

The workaround for IE7 and below:

$.ajax({
    ...
    xhr: function() {
        if ($.browser.msie && $.browser.version.substr(0,1) <= 7)
            return new ActiveXObject("Microsoft.XMLHTTP");
        else
            return new XMLHttpRequest();
    },
    ...
});