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

2018-07-01 20:09:55

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

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

What happens if you remove rel="stats" ?

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

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.

链接地址: http://www.djcxy.com/p/88772.html

上一篇: 为什么要使用99.9％而不是100％的HTML / CSS宽度？

下一篇: IE + jQuery + Ajax + XHTML：HTML在.html（）或.innerHTML之后被修剪