Question

I have been searching high and low on the internet for an answer to this question and I think there is something I am missing. I am reading in a gallery of photos from an xml document via jquery $.ajax() and I am having trouble with IE7. The function I am using works fine in all the other browsers I’ve tested.

I have read a ton on setting the correct dataType and contentType for IE, but I’m beginning to question whether or not that is the issue. I have tried a ton of combinations of different dataTypes and contentTypes and none of them seem to do the trick. I am wondering if there may be an issue with my xml or with the way my function is reading the xml, because with the function set the way it currently is, everything runs through in IE7, but none of the images are added to the DOM.

    var dataType;
if ($.browser.msie) { dataType = 'text' } else { dataType = 'html' };

$.ajax({
   type: 'GET',
   url: 'images/gallery-images/gallery-images.xml',
   dataType: dataType,
   success: function(parseXML){

   $(parseXML).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');

That is the code I am using to extract the data from my xml. Like I said, everything, including this and everything after this, seems to run fine in IE7, but the images are never loaded.

I am stumped, hoping to find some help here.

Answer 1

There’s nothing I recognise as an IE7-snarl but here are a few suggestions:

• Classes – Try setting classes with class="..." or .addClass('...') as opposed to a prop in a map, eg. photoInfo = $('<div class="photo-info"></div>').addClass(kind).
• Declarations – icon and iconClass are both missing a var (the previous line ends with semicolon).
• Duplicate ids? – Avoid a possibly duplicated id in the videos div with eg. var videos = $('<div></div>').appendTo($('#photo-viewer-inner')).load('images/gallery-images/videos.html#video-inner');. Note also I removed a space from the URL.