Jquery in Internet Explorer: find image problem(works in FF and Chrome)

$.get("js/getflickreasy.php", function(data)
{
  $(data).find("item").each(function()
  {
    var title = $(this).find("title").text();
    var description = $(this).find("description").text();
    var thumbnail = $(description).find("img").attr("src");
  }
  );
}
);

In Firefox and Chrome this works fine. But in Internet Explorer the variables title and description will get the value "". Thumbnail is undefined. I know it gets data in IE. The getflickreasy.php retrieves rss from flickr.

I don't think it's a problem with IE cache because it's the same after clearing it. Maybe it's some problem with $(this).find in IE.

You can view the code in action at my webpage

Edit: with $.get it will retrieve the data but Internet Explorer can't process it. with $.ajax it won't retrieve the data at all at the moment.

Edit : I changed the url that the php will get images to :

http://开发者_高级运维api.flickr.com/services/feeds/photos_public.gne?id=42980910@N02&lang=en-us&format=xml

instead of :

http://api.flickr.com/services/feeds/photos_public.gne?id=42980910@N02&lang=en-us&format=rss_200

and I added header("content-type: text/xml"); to the php file. I think that it should get xml now, right? Fiddler says:

HTTP/1.1 200 OK

Date: Wed, 17 Nov 2010 20:45:43 GMT 
Server: Apache
X-Powered-By: PHP/5.2.13
Connection: close
Content-Type: text/xml
Content-Length: 25878

But still the same problem (at least I think so).

---

Hmmm... You might need to set the datatype to XML. instead of using $.get() try $.ajax():

$.ajax({
    type: "GET",
    url: "js/getflickreasy.php",
    dataType: "xml",
    success: function(data) {
        $(data).find("item").each(function() {
            var item = $(this), title, description, thumbnail;

            title = item.find("title").text();
            description = item.find("description").text();
            thumbnail = item.find("img").attr("src");
        });
    }
});

The problem is most likely your response from the server.

With your current configuration (the one using $.ajax method), the response is being recieved by IE. I verified this using a tool called fiddler.

The problem is, the browser is sending the following header:

Accept: application/xml, text/xml

But the response from the server is:

Content-Type: text/html

Until you can get the server to return a valid XML header, IE—and the $.ajax method—will continue to fail.

This is what I would consider one of the few times that IE is doing something right! The fact that the other browsers do not fail is irritating. They should. That way you wouldn't be confused thinking it's an IE specific problem. But, I digress.

---

I visited your page with IE8, and the data variable you have is definately returning your desired XML. So the information is ready for parsing, just not in a way IE is friendly with.

In addition to what @Stephen has mentioned above, I tend to go with something a little more robust. Ensuring it works in various versions of IE as well as all non-EI browsers. The method below also allows me to pass off the success and error events to other functions for handling.

// this method of doing the ajax call is a little beefier than required. 
//  - allows us to test local XML files as well with IE
//  - allows us to pass additional arguments with the success / error functions.
$.ajax({
    type: "GET",
    url: your.url.here,
    cache: true,    // or set to false
    dataType: ($.browser.msie) ? "text/xml" : "xml",
    success: function(data) {
            var xml;
            if (typeof data == "string") {
                xml = new ActiveXObject("Microsoft.XMLDOM");
                xml.async = false;
                xml.loadXML(data);
            } else {
                xml = data;
            }
            functionToHandleData(xml);
    },
    error: function(xhr, textStatus, errorThrown) {
            //console.log('Problem Occured: \n' + xhr.statusText + " | " + textStatus + " | " + errorThrown);
            functionToHandleError();
    }
});

---

IE is significantly more fussy about code correctness than Firefox and Chrome for HTML/XML received via AJAX especially.

If FF and Chrome are handling an AJAX request that IE isn't, it is usually due to a parse error in the returned HTML/XML.