jquery не обновляет DOM после $ .getJSON в IE / Internet Explorer

Question

У меня есть страница, содержащая элемент <displayedimage>, который не обновляется с помощью jquery document.ready / $. GetJSON funcitonality в IE 6 и IE 8 (возможно, IE 7 тоже, хотя я не тестировал) , Этот же функционал отлично работает в XP Safari и OS X Safari, OS X Chrome, OS X Opera и т. Д. Итак, вот что происходит:

У меня есть элемент, который пуст при первой загрузке, но заполняется методом javascript, выполняемым document.ready:

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

обновляется:

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

Как уже говорилось, эта система прекрасно работает в OS X Safari, OS X Chrome, OS X Opera, XP Safari, но, похоже, ничего не делает в XP IE. Я выполнил простую отладку (alert («loadFirstImage selected») в методе loadFirstImage, и он выдает мне предупреждение, поэтому кажется, что это может быть какая-то проблема .getJSON?

Answer 1

Использование произвольных имен элементов DOM может привести к таким проблемам и несоответствиям.

Почему бы вам просто не использовать стандартный элемент, например div или span?

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

И в вашем $.getJSON обратном вызове вы устанавливаете его содержимое:

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

Браузеры принимают любую разметку, даже если это не разрешенный HTML. Это означает, что браузер попытается догадаться о том, что вы вероятно имели в виду. Это может привести к таким проблемам с совместимостью браузеров, как сейчас, поэтому я бы порекомендовал вам проверить вашу разметку.

Answer 2

Также обратите внимание, что , если $.getJSON вызывается несколько раз на одной и той же странице (возможно, в результате нажатия кнопки или подобного), в IE 7/8 ваш данные НЕ будут обновлены , потому что IE кэширует ajax-запросы по умолчанию (например, Chrome и FF этого не делают).

Решение состоит в том, чтобы вместо этого использовать метод $.ajax ($.getJSON - это метод обертки для $.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'
      }
    });

Answer 3

Поскольку вы используете пользовательские теги, вы явно создали эти теги, необходимые для IE? Поместите это в head вашей страницы:

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

Для записи: Я согласен с другими ответами, что вам следует придерживаться допустимых тегов, иначе вы можете столкнуться с конфликтом имен.

Answer 4

Попробуйте с семантикой

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