jQuery get Method problem using IE

Question

I 've created a small photo tour using HTML, CSS and jQuery. It works fine in Firefox and other browsers, but has some problems in IE.

Here's the code I use to load the data:

function loadNode(nodeID){
jQuery('.churchViewError').hide('slow');
    jQuery(".churchViewLoading").show( 'fast');
    jQuery.get(cVBaseURL+"ajax/getNodeHTML.php?node="+nodeID, 
        function(data, status, XMLHTTPRequest){
            //someone suggested empty() might help in IE - won't fix it, though
            jQuery("#churchViewInner").empty(); 
            jQuery("#churchViewInner").html(data);
            jQuery(".churchViewLoading").hide('slow');
        }
        , 'html');

}

In firefox, the new content (mainly several img and a-Tags) is displayed properly, but IE just shows an empty div. Using

alert(jQuery("#churchViewInner").html());

after the get-Method reveals, that even in IE the new contents seem to be stored in the DOM. It appears that IE doesn't want to actually load/display the images. (Tested in IE 8)

Does anyone have a clue how I can get it working in IE?

Here's the original: http://www.minis-friskus.de/churchview/ (german site) click the red button to start.

Answer 1

Your response has some extra closing tags that IE probably isn't liking, your response looks like this:

<div class="churchViewImage">           <img src="http://www.deviala.de/friskus/wp-content/plugins/friskusChurchView/img/nodes/IMG_0005.JPG"&gt;       </div>      <div class="arrow" style="left:282px; top: 348px; z-index: 3;">         <a href="#churchViewContainer" onclick="loadNode('2');">                <img src="http://www.deviala.de/friskus/wp-content/plugins/friskusChurchView/img/arrows/north.png"&gt;         </a>        </div>  </div></div>

Notice the extra </div></div> on the end, try removing that to get valid markup, then see what IE does.