IE+jQuery+Ajax+XHTML: HTML getting clipped after .html() or .innerHTML

Question

This is a really hard problem to put into a brief sentence, so I apologize if I kill it.

I launched a site recently which had been extensively tested on my local web server on all my desired browser platforms, including IE8 (IE8 standards mode, XHTML Strict). I encountered no problems at all until the site went live on a dedicated web server.

The site uses jQuery.get() on the change event for the input elements of a form, where the response is grafted into a common <div id="results"></div>.

Despite the caching woes I've read about with IE and XMLHTTPRequest, my problem seems to take place AFTER my ajax callback begins execution. My callback (supplied via .get() / .load()-- I've tried both) receives an HTML fragment returned by my server. Testing the returned content in any browser reveals exactly what I expect the content to be.

However, as soon as I put the HTML fragment into the DOM tree in the #results, IE actually clips the first 7 or 8 opening tags off of my markup (along with the children of most of those tags). It's wickedly bizarre. I fixed it in another area of the site by setting the HTML content via jQuery('#results')[0].innerHTML = content, but no dice this time.

Example response:

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

Literally EVERYTHING up through the opening tag of that <span rel="stats"> is truncated. The effect is that IE displays my returned AJAX content as if it were to begin with the text node: ..statistics.. </span>. (I tried removing the rel="stats" at the suggestion of a comment below, changing it to a CSS class instead, but the same result occurs.)

If I request my AJAX url directly via the browser's URL field, the returned content is perfect.

If I use alert() to display the AJAX content returned, it is perfect.

If I assign my AJAX content via .html() or .innerHTML, it is immediately truncated.

Sooo.... WTF? IE's (crappy) debugger displays no script errors or anything of that nature. Has anybody ever dealt with this kind of issue before? Again, I add emphasis to the fact that on my development server (127.0.0.1), IE has no problems, and it seems to use the same "mode" (IE8 Standards) and everything.

EDIT: Here is the Javascript powering the AJAX lookup:

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

What happens if you remove rel="stats"?

The rel attribute is not allowed to have stats in it, according to MSDN.

Answer 2

Here's a wild guess, but it helped me once with an IE problem:

Instead of $('your_container').html( your_content ), try to empty the container object entirely, then use append(). So:

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

It's IE. You never know.

Answer 3

I had a similar issue happen where part of the html code appended was clipped, but if I created an alert of the inner html, or forced a scroll, it appeared.

I then came across an article that seemed to indicate that IE8 was not redrawing the pane correctly. http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

The only way I managed to get it to work was to add a class to it, wait, then remove the class. If I did not wait, it seems to skip execution.

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

Answer 4

I can confirm the problem. I have generated a similar AJAX response to the original submitter. Some initial info, then a loop through the data to create 8 different div's worth of content. When running the page, it would do the load, but IE would only show some of the data. One small change fixed this.

I had a span on the page (for a set of video tags) within each div, so that I could truncate text if it was too long, and use the span with the title attribute as a hovertip. If the tag span was formatted this way:

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

it wouldn't work, whereas:

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

worked fine. Of course, I noticed my error in that there is no span closing tag. Fixing this also worked, but the important thing that I noticed is that IE seems to be very intolerant of formatting errors on AJAX, or, more correctly, AHAH.

I would, after having seen this, guarantee that there is some slightly malformed HTML in the return string. I had the exact same error, a fragment of information returned by javascript, that you did, and correcting the error fixed it for me.