Question

I have a page that contains an element, <displayedimage>, that is not getting updated using jquery’s document.ready/$.getJSON funcitonality in IE 6 and IE 8 (probably IE 7 too even though I haven’t tested). This same piece of funcitonality works fine on XP Safari and OS X Safari, OS X Chrome, OS X Opera, etc. So, here’s what happens:

I have an element, , that is empty on first load, but gets populated by a javascript method executed by document.ready:

<div id="imagecontrol">
   <displayedimage></displayedimage>
</div>

gets updated by:

function loadFirstImage() {
        $.getJSON("/servlet/access/image/" + id,
            function(json) {
                $("displayedimage").html("<a href=\"/servlet/images/" + json.images[0].filename + "\"><img src=\"/servlet/images/s_" + json.images[0].filename + "\"></img></a>");
                $("imagelabel").html(json.images[0].label);
            });
}

As stated, this system works fine in OS X Safari, OS X Chrome, OS X Opera, XP Safari, but doesn’t seem to do anything in XP IE. I’ve performed simple debugging (alert(“loadFirstImage called”) in the loadFirstImage method and it gives me an alert, so it seems that it might be some .getJSON issue? Any suggestions on where to start with something like this? Thanks.

Answer 1

Using arbitrary DOM element names can give you this kind of problems and inconsistencies.

Why don’t you just simply use a standard element, like a div or a span perhaps?:

<div id="imagecontrol">
   <div id="displayedimage"></div>
</div>

And in your $.getJSON callback you set the contents of it:

$("#displayedimage").html(/*...*/);

Browsers will accept any markup, even if it’s not legal HTML. By this, it means that the browser will try to guess about what you probably meant. That can lead to having browser compatibility issues as the one you are now, for that I would recommend you to validate your markup.