IE not triggering jQuery Ajax success

Question

Hello all,

I'm working on a script to load some images async using jQuery.

Here is a code snippet of the function that loads the images -

try{
for(img in imgsArray){
 $.ajax({ 
  async: false,
  type: "get",
  url:imgsArray[img],
  success:function(imgFile){
   alert("success");
   //do something useful
   },
   error:function(XMLHttpRequest,status,error){
   //do nothing
  }
 });//ajax
} 
}
catch(e){
    //oops
}

I have tested this in Firefox, Webkit (Safari,Chrome) and it works.

The images are in a folder on the server and I'm using jQuery 1.3.

any ideas?

Much appreciated.

Answer 1

I'd suggest using Charles Proxy to see what's going on - i.e. is the request going out at all? What's the response?

Also, I think there might be some Exception thrown, so why don't you add some alerts in the Catch section to see what happens?

Answer 2

I have beeing having similar problems with IE and AJAX over the past couple of days with my JSONP Web Service. Even the smallest error in your code can cause everything to break in IE.

Probably the best thing to do is debug the page in IE using Visual Web Developer Express or Visual Studio. Here is a tutorial of how to do it:

How to debug JavaScript with Visual Web Developer Express

Follow the instructions and maybe place breakpoints on at the begining of the AJAX request.

Try these things too:
- removing "XMLHttpRequest" from the error field, I have never used it before and my code works just fine.
- Make sure you are using the latest version of jquery (1.3.2)?

Hope you get it working soon!

Answer 3

In the end I had to create a separate function for IE browsers.

The objective was to test for an image at a location so the code looked something like -

    //get the images from the array
for(img in imgsArray){  

    if($.browser.msie){  
    /* DOM manipulation method */
    //IE has problems with ajax so try this instead
    //create a new image object with unique ID
    var testImg = $("<img/>");
    var imgID = "imgID"+img;

    //hide it..
    testImg .css({ "visibility":"hidden" });
    testImg .attr("src",imgsArray[img]);
    testImg .attr("id",imgID);

    //.. and insert it into the DOM or else test will always fail
    //because it does not exist as far as browser is concerned
    $("body").append(testImg );

    //test for image
    if(document.getElementById(imgID).width > 60){
     //do something useful
    }
}

It is not really the answer to my question but it's a functional work around.

Answer 4

I had a similar problem -- IE appears to trigger failure if it can't parse the response as xml, even if the request was a success, so if you're requesting an image, for example, it would return a xhr.status of 200 in the error block.

I stuck my "success" functionality in the success block for FF and in the error block wrapped in an "if (xhr.status == 200)" conditional.