IE+jQuery+Ajax+XHTML: HTML getting clipped after .

问题:

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

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

回答2:

What happens if you remove rel="stats"?

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

回答3:

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.

回答4:

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.

回答5:

Change all your METHODS to POST. The default is GET.

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

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

That should do it... I know I'm missing some stuff from your functions, but this is the jist of it.

回答6:

I had exactly the same issue. I was using jQuery's .html() to insert response from the server. The beginning of the response text began with some php followed by a line break and then some HTML. Just removing the line break caused the truncation to stop.

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

After a few experiments, I was able to isolate the cause of my problem to line breaks at the beginning of the file.

For example, truncation occurs beginning file (quotes added to show line breaks):

"



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

Truncation goes away by removing those first line breaks.

This was using jquery-1.6.4.min.js and IE 9 (in IE 8 emulation mode) on Windows 7 (using VMWare virtual windows machine)

Update: Being a thorough guy, since I am already using a wrapper around the jquery .html() function to find and register custom elements, I went ahead and took care of the IE problem by trimming any data that was a string. This works well:

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

This works well for me.