IE + jQuery + Ajax + XHTML: HTML-код обрезается после .html () или .innerHTML

Question

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

Недавно я запустил сайт, который был тщательно протестирован на моем локальном веб-сервере во всех моих браузерах.платформы, включая IE8 (режим стандартов IE8, XHTML Strict).Я не столкнулся с какими-либо проблемами, пока сайт не начал работать на выделенном веб-сервере.

Сайт использует jQuery.get() в событии change для элементов input формы, в которую вводится ответв общую <div id="results"></div>.

Несмотря на проблемы с кэшированием, о которых я читал в IE и XMLHTTPRequest, моя проблема, кажется, имеет место ПОСЛЕ того, как мой обратный вызов ajax начинает выполняться.Мой обратный вызов (предоставляется через .get() / .load() - я пробовал оба) получает фрагмент HTML, возвращенный моим сервером.Тестирование возвращенного содержимого в любом браузере показывает, что именно я ожидаю от содержимого.

Однако, как только я помещаю фрагмент HTML в дерево DOM в #results, IE фактически обрезает первые 7 или8 открывающих тегов от моей разметки (вместе с дочерними элементами большинства из этих тегов).Это злобно странно.Я исправил это в другой области сайта, установив HTML-контент с помощью jQuery('#results')[0].innerHTML = content, но на этот раз без кубиков.

Пример ответа:

<div>
    <a href="#">some link</a>
    <span>stuff, blah blah</span>
    <a href="#">another link</a>

    <ul>
        <li id="item-2342">
            <img src="#" />
            <div class="info">
                <h6> ..title.. </h6>
                <a href="#">View</a>
                <span rel="stats"> ..statistics.. </span>
            </div>
        </li>

        <!-- ... and so on in a loop over items to create more <li> items ... -->
    </ul>
</div>

Буквально ВСЁ через открывающий тегиз этого <span rel="stats"> усечено.В результате IE отображает мой возвращенный контент AJAX, как если бы он начинался с текстового узла: ..statistics.. </span>.(Я попытался удалить rel="stats" по предложению комментария ниже, вместо этого изменив его на класс CSS, но результат тот же.)

Если я запрашиваю свой URL AJAX напрямую через поле URL браузера,возвращенное содержимое идеально.

Если я использую alert() для отображения возвращенного содержимого AJAX, оно идеально.

Если я назначаю свое содержимое AJAX с помощью .html() или .innerHTML,это немедленно усекается.

Оооо .... WTF?IE (дерьмовый) отладчик не отображает ошибок скрипта или чего-либо подобного.Кто-нибудь когда-нибудь сталкивался с такой проблемой раньше?Опять же, я подчеркиваю тот факт, что на моем сервере разработки (127.0.0.1) IE не имеет проблем, и он, похоже, использует тот же «режим» (стандарты IE8) и все.

РЕДАКТИРОВАТЬ: ЗдесьJavascript поддерживает поиск AJAX:

jQuery('.ajax-panel').live('load', function(event, request_string){
    var panel = jQuery(this).stop(true).fadeTo(100, 0.2).addClass('loading');
    var form = jQuery(panel.attr('rel'));
    jQuery.get(form.attr('action'), request_string ? request_string : form.serialize(), function(response){

        // WTF?
        // panel[0].innerHTML = response;
        panel.empty().append(response);

        // Carry on.
        panel.removeClass('loading').stop(true).fadeTo(100, 1);
    });
});

Answer 1

У меня была похожая проблема, когда часть добавленного HTML-кода была обрезана, но если я создал предупреждение о внутреннем HTML-коде или вызвал прокрутку, он появился.

Затем я наткнулся на статью, в которой, казалось, указывалось, что IE8 неправильно перерисовывал панель. http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

Единственный способ заставить его работать - добавить класс, подождать, а затем удалить класс. Если я не стал ждать, кажется, пропустить выполнение.

function Redraw(element)
{
 if ($.browser.msie)
 {
  element.addClass("invisible");
  setTimeout(function(){
    element.removeClass("invisible");
   },1);
 }
}

Answer 2

Я могу подтвердить проблему. Я сгенерировал аналогичный AJAX-ответ исходному отправителю. Некоторая начальная информация, а затем цикл по данным, чтобы создать 8 различных значений div. При запуске страницы она будет выполнять загрузку, но IE покажет только некоторые данные. Одно небольшое изменение исправило это.

У меня был промежуток на странице (для набора тегов видео) внутри каждого элемента div, чтобы я мог обрезать текст, если он был слишком длинным, и использовать диапазон с атрибутом title в качестве всплывающей подсказки. Если диапазон тегов был отформатирован следующим образом:

<div>Tags: <span title="Miller, Jackson, Brown">Miller, Jackson...</div>

это не сработает, тогда как:

<div>Tags: Miller, Jackson, Brown</div>

работал нормально. Конечно, я заметил свою ошибку в том, что нет тега закрытия промежутка. Исправление этого также работало, но важно отметить, что IE, похоже, очень нетерпим к ошибкам форматирования в AJAX или, вернее, AHAH.

Я бы, увидев это, гарантировал, что в возвращаемой строке есть немного искаженный HTML. У меня была та же самая ошибка, фрагмент информации, возвращенной javascript, который вы сделали, и исправление ошибки исправило ее для меня.

Answer 3

Что произойдет, если вы удалите rel="stats"?

Атрибут rel не может содержать stats, согласно MSDN .

Answer 4

У меня была точно такая же проблема.Я использовал JQuery .html (), чтобы вставить ответ от сервера.Начало текста ответа начиналось с некоторого php, за которым следовал разрыв строки, а затем немного HTML.Простое удаление разрыва строки привело к останову усечения.

From:

<?php 
$this->load->helper('stdclass_helper');
?>

<div id="expense_entry" class="element_record" style="padding:20px;" 

To:

<?php 
$this->load->helper('stdclass_helper');
?>
<div id="expense_entry" class="element_record" style="padding:20px;" 

После нескольких экспериментов я смог выделитьпричина моей проблемы с разрывами строк в начале файла.

Например, происходит усечение, начиная с файла (кавычки добавляются для отображения разрывов строк):

"



<div id="expense_entry" class="element_record" style="padding:20px;" saveHandler="Accounting.Expenses.saveExpense">
<!-- BEGIN EXPENSE ENTRY FORM -->
<?php 
$this->load->helper('stdclass_helper');
?>
"

* 1015Усечение исчезает, удаляя эти первые разрывы строк.

При этом использовались jquery-1.6.4.min.js и IE 9 (в режиме эмуляции IE 8) в Windows 7 (с виртуальной машиной Windows VMare)

Обновление: будучи тщательным парнем, так как я уже использую оболочку для функции jquery .html () для поиска и регистрации пользовательских элементов, я пошел дальше и позаботился о проблеме IE, обрезав любые данные, которые былистрока.Это хорошо работает:

// Override jQuery's html() method, so that we can register any special elements in new html.
(function( $, oldHtmlMethod ){

    // Override the core html method in the jQuery object.
    $.fn.html = function(data){
        // Execute the original HTML method using the
        // augmented arguments collection.
        //trim whitespace that could cause IE to truncate returned content
        **if(typeof data == 'string'){
            data = data.trim();
        }**
        var results = oldHtmlMethod.apply( this, arguments );
        return results;

    };

})( jQuery, jQuery.fn.html );

Это хорошо работает для меня.

Answer 5

Измените все ваши методы на POST.По умолчанию это GET.

jQuery.ajax({
    url: form.attr('action'), 
    success: function(){
        panel.empty().append(response);

        // Carry on.
        panel.removeClass('loading').stop(true).fadeTo(100, 1);
    }
});

Это должно сделать это ... Я знаю, что мне не хватает некоторых вещей из ваших функций, но это суть.

Answer 6

Вот дикая догадка, но однажды она помогла мне с проблемой IE:

Вместо $('your_container').html( your_content ) попробуйте полностью очистить объект контейнера, затем используйте append(). Итак:

$('your_container').empty().append( your_content );

Это IE. Вы никогда не знаете.