IE+jQuery+Ajax+XHTML : Le HTML est coupé après .html() ou .innerHTML

Question

C'est un problème très difficile à exprimer en une phrase brève, alors je m'excuse si je le tue.

J'ai récemment lancé un site qui avait été longuement testé sur mon serveur web local sur toutes les plateformes de navigateur souhaitées, y compris IE8 (mode standard IE8, XHTML Strict). Je n'ai rencontré aucun problème jusqu'à ce que le site soit mis en ligne sur un serveur web dédié.

Le site utilise jQuery.get() en el change pour l'événement input des éléments d'un formulaire, où la réponse est greffée dans un fichier commun <div id="results"></div> .

Malgré les problèmes de mise en cache que j'ai pu lire à propos d'IE et de XMLHTTPRequest, mon problème semble survenir APRÈS le début de l'exécution de ma fonction d'appel ajax. Ma callback (fournie via .get() / .load() -- J'ai essayé les deux) reçoit un fragment HTML renvoyé par mon serveur. Le test du contenu renvoyé dans n'importe quel navigateur révèle exactement ce que j'attends de ce contenu.

Cependant, dès que je place le fragment HTML dans l'arborescence DOM dans le fichier #results En fait, IE supprime les 7 ou 8 premières balises d'ouverture de mon balisage (ainsi que les enfants de la plupart de ces balises). C'est terriblement bizarre. J'ai corrigé ce problème dans une autre partie du site en définissant le contenu HTML via la commande jQuery('#results')[0].innerHTML = content mais pas de dé cette fois.

Exemple de réponse :

<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>

Littéralement TOUT jusqu'à la balise d'ouverture de ce <span rel="stats"> est tronquée. L'effet est qu'IE affiche mon contenu AJAX retourné comme s'il commençait par le nœud de texte : ..statistics.. </span> . (J'ai essayé de retirer le rel="stats" à la suggestion d'un commentaire ci-dessous, en le changeant en une classe CSS à la place, mais le même résultat se produit).

Si je demande mon url AJAX directement via le champ URL du navigateur, le contenu renvoyé est parfait.

Si j'utilise alert() pour afficher le contenu AJAX retourné, c'est parfait.

Si j'assigne mon contenu AJAX via .html() o .innerHTML il est immédiatement tronqué.

Sooo.... WTF ? Le débogueur (minable) d'IE n'affiche aucune erreur script ou quoi que ce soit de ce genre. Quelqu'un a-t-il déjà eu affaire à ce genre de problème ? Encore une fois, j'insiste sur le fait que sur mon serveur de développement (127.0.0.1), IE n'a aucun problème, et il semble utiliser le même "mode" (IE8 Standards) et tout.

EDIT : Voici le Javascript qui alimente le lookup 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

J'ai eu exactement le même problème. J'utilisais la fonction .html() de jQuery pour insérer la réponse du serveur. Le début du texte de la réponse commençait par du php, suivi d'un saut de ligne, puis de HTML. Il suffit de supprimer le saut de ligne pour que la troncature s'arrête.

De :

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

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

A :

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

Après quelques expériences, j'ai pu isoler la cause de mon le problème des sauts de ligne au début du fichier.

Par exemple, une troncature se produit au début du fichier (les guillemets sont ajoutés pour indiquer les sauts de ligne) :

"

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

La troncature disparaît en supprimant ces premiers sauts de ligne.

J'ai utilisé jquery-1.6.4.min.js et IE 9 (en mode d'émulation IE 8) sur Windows 7 (en utilisant la machine virtuelle Windows de VMWare).

Mise à jour : Comme je suis un gars minutieux, et que j'utilise déjà un wrapper autour de la fonction jquery .html() pour trouver et enregistrer les éléments personnalisés, j'ai pris les devants et je me suis occupé du problème d'IE en coupant toutes les données qui étaient des chaînes. Cela fonctionne bien :

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

Cela fonctionne bien pour moi.