jquery not updating DOM after $.getJSON in IE/Internet Explorer

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.

Answer 2

Try it with sematics

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

js

$.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>");
 });

Answer 3

Since you are using custom tags, have you explicitly created those tags as needed for IE? Put this in the head of your page:

<!--[if IE]>
<script type="text/javascript" charset="utf-8">
  document.createElement('displayedimage');
  document.createElement('imagelabel');
</script>
<![endif]-->

For the record: I agree with the other answers that you should stick to valid tags or you may run into name collision later on.

Answer 4

Also note that if $.getJSON is called multiple times on the same page (perhaps as a result of button click or similar), in IE 7/8 your data will NOT be updated because IE caches ajax requests by default (e.g. Chrome and FF don't do that).

Solution is to use $.ajax method instead ($.getJSON is a wrapper method for $.ajax):

    $.ajax({
      url: 'JSON_SOURCE_URL',
      dataType: 'json', 
      cache: false, // 'cache: false' must be present for IE 7 & 8
      success: function(data) {
        // do your thing with 'data'
      }
    });