Jquery Ajax with IE

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);
},
});

IE hangs when it gets to line 2 of the function 'parseXML'. It seems to get the contents of the xml file fine, but it can't traverse through them and extract the data I need. Yes, I've tried changing dataTypes and contentTypes in multiple different combinations. No such luck. — jcbfshr, Mar 19 '12 at 21:23
cant use "class" as a var or property name, most browsers accept it but shouldn't. — Dampsquid, Mar 19 '12 at 21:25

John Fable · Answer 1 · 2012-03-19T21:58:14.310

In your AJAX call remove the trailing comma from the function.

Change this:

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

to this:

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

Quoting another SO post:

"While creating an object {} or an array [], you separate individual elements with a comma. But here there is an additional comma after the last item like [a, b, c,] - that is not allowed as per ECMA-262."

Check this link for a reference: http://stackoverflow.com/questions/1819821/trailing-comma-problem-javascript — John Fable, Mar 19 '12 at 21:57

score 0 · Accepted Answer · answered Mar 19 '12 at 21:30

0

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.

answered Mar 19 '12 at 21:30

Dampsquid

2,456
15
14

So, the "class" attribute in my xml for my icons is throwing this all off? Or is there something else I need to change, as well? – jcbfshr Mar 19 '12 at 21:50
not the xml things like this "class": "gallery-section" in the JS code – Dampsquid Mar 19 '12 at 21:52
wow. Ok. I guess I will get started on trying to change this stuff to get it to work then. Any help there? – jcbfshr Mar 19 '12 at 22:08

Jquery Ajax with IE

2 Answers2