$.ajax misfire in ie6

Question

I'm using the flickr api to create a simple gallery based on images pulled in by their tag.

The gallery is working fine in every browser except ie6. When you navigate to the page (by clicking a link) in ie6, the $.ajax success/error code blocks refuse to fire, however when the page is reloaded, or navigated to directly (by entering a url) there are no problems.

$.ajax({
 type: "GET",
    url: "http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=" + api_key + "&user_id=" + user_id + "&tags=" + tags + "&format=json&jsoncallback=?",
    cache: false,
    dataType: "jsonp",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        alert('good');
    },
    timeout: 2000,
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    }
});

The above code is obviously a simplified version of the actual javascript, but the bug is still present.

Any help would be greatly appreciated. This seems to be a very weird bug. Perhaps it's a caching issue?

Answer 1

This problem is pretty recurrent. IE caches AJAX calls. You need to append a random number or string to your call each time so that it doesn't run a cached call.

url: "http://[your url]&rand=" + Math.Random(),

Answer 2

Two thoughts:

1. Is your call within a $(document).ready() block?

2. Try getting rid of the ampersand right at the beginning of the query string:

   /?method=flickr.photos.search&...

Answer 3

How is the "link" triggering the AJAX load?

• inline onclick="doSomething();"
• inline href="javascript:doSomething();"
• via jQuery $('#somelink').bind('click', doSomething);
• something else?

I ask because IE6 has a known bug whereby if you have/use the javascript: protocol on a link... then use JavaScript to load a different page it requests the page but never renders it. I wonder if (depending on how your AJAX is attached) if the above bug extends to AJAX requests not just location.href requests.

Answer 4

Four things related to your code but not to your question:

• timeout is not taken into account by $.ajax when dealing with jsonp
• nor is contentType
• the error callback is never called in the context of a jsonp request
• You should really use the data parameter (the code would be far cleaner than with the custom url building it currently shows)

Point 1 & 3 are due to limitations in the way $.ajax is implemented. I recommend http://code.google.com/p/jquery-jsonp/ if you really need those features.

Now, apart from what karim79 pointed out, I see nothing wrong with your code. So my guess is you have something else going wrong prior to it in the function you feed to $(document).ready() . IE is far less lenient than other browsers when it comes to javascript syntax. Try putting the $.ajax call as early as possible.

Also:

• Does it work in IE7?
• What version of jQuery are you using?