Question

I am working on parsing some xml via jquery ajax. I have things working nicely in all browsers, with the exception of IE.

I have narrowed it down to where IE is hanging and I’m not sure how to fix it. I can’t tell if it is a problem with the jquery I’m using to get the html or if it is a problem with my xml or if it is something I am overlooking. What is interesting is when I alert out my variable holding the xml data, IE alerts out all of the information correctly, but it can’t seem to traverse it and format the data correctly. Please help.

Here is the code I am using to extract the data from my xml:

function parseXML (data) {
        $(data).find("section").each(function() {
            var $section = $(this),
                photos = $section.find("photo"),
                photoContainer = $("<div></div>", {
                    id: $section.attr("id"),
                    "class": "gallery-section"
                });

            photos.each(function() {

                var photo = $(this),
                    imageurl = photo.attr("imageurl"),
                    title = photo.find("title").text(),
                    description = photo.find("description").html(),
                    kind = photo.find("description").attr("type");
                icon = photo.find("icon").attr("source");
                iconClass = photo.find("icon").attr("class");

                var photoWrapper = $("<div class='photo'></div>"),
                    imageElem = $("<img />", {
                        "src": imageurl,
                        "class": "gallery-photo"
                    }),
                    photoInfo = $("<div></div>", {
                        "class": "photo-info " + kind
                    }),
                    iconInsert = $("<img />", {
                        "src": icon,
                        "class": iconClass
                    }),
                    header = $("<h1></h1>", {
                        text: title
                    }),
                    photoDescription = $("<div></div>", {
                        html: description
                    });

                photoInfo.append(iconInsert).append(header).append(photoDescription);
                photoWrapper.append(imageElem).append(photoInfo);
                photoContainer.append(photoWrapper);

            });
            $("#photo-viewer-inner").append(photoContainer);
        });
        var videos = "<div id='videos'></div>";
        $("#photo-viewer-inner").append(videos);
        $("#videos").load("images/gallery-images/videos.html #video-inner");
    }

/* Get Photos From XML */
var dataType;
if ($.browser.msie) {
    dataType = "text";
} else {
    dataType = "html";
}

$.ajax({
    type: "GET",
    url: "images/gallery-images/gallery-images.xml",
    dataType: dataType,
    success: function( data, status )
{
  parseXML( data );
  alert(data);
},
});

Answer 1

IE’s javascript doesn’t allow class to be used as a variable or property name, where other browzers do. This link has some interasting comments on it bugzilla.mozilla, looks like IE is right FOR ONCE.