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

Question

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

У меня есть элемент, который пуст при первой загрузке, но получает населен яваскрипта методом выполняемом 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, Chrome OS X, OS X Opera, XP Safari, но, похоже, ничего не делает в XP IE. Я выполнил простую отладку (alert («loadFirstImage called») в методе loadFirstImage, и он дает мне предупреждение, поэтому кажется, что это может быть проблема с .getJSON? Любые предложения о том, с чего начать с чего-то подобного? Спасибо.

Answer 1

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

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

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

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

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

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

Answer 2

Попробуйте с 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

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

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

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

Answer 4

отметить также, что если $.getJSON вызывается несколько раз на той же странице (возможно, в результате нажатия кнопки или аналогичный), в IE 7/8 ваши данные не будут обновляться, потому что IE кэширует Аякса запросы по умолчанию (например, 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' 
     } 
    });