IE + jQuery + Ajax + XHTML: HTML gets truncated after .html () or .innerHTML

Question

It is a very difficult task to insert a short sentence, so I apologize if I kill him.

I recently launched a site that has been extensively tested on my local web server on all of my required browser platforms, including IE8 (IE8 standards mode, XHTML Strict). I had no problems until the site went to a dedicated web server.

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

Despite the caching issues that I read about in IE and XMLHTTPRequest, my problem seems to happen AFTER my ajax callback starts execution. My callback (provided via .get() / .load() - I tried both) gets the HTML fragment returned by my server. Testing the returned content in any browser shows exactly what I expect from the content.

However, as soon as I put the HTML fragment in the DOM tree in #results , IE will actually copy the first 7 or 8 opening tags from my markup (along with the children of most of these tags). This is viciously bizarre. I installed it in another area of ​​the site by setting the HTML content via jQuery('#results')[0].innerHTML = content , but this time not a cube.

Answer example:

 <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 through the opening tag that <span rel="stats"> truncated. The effect is that IE displays my returned AJAX content as if it started with the text node: ..statistics.. </span> . (I tried to remove rel="stats" as suggested below, replacing it with a CSS class, but the same result.)

If I request my AJAX URL directly through the browser URL field, the returned content will be perfect.

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

If I assign my AJAX content using .html() or .innerHTML , it will be truncated immediately.

Sooo .... WTF? IE debugger (crappy) displays script errors or something like that. Has anyone ever dealt with this issue before? Again, I emphasize that IE has no problems on my development server (127.0.0.1), and it seems to use the same “mode” (IE8 standards) and all that.

EDIT: here is the Javascript providing the AJAX search:

 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

I had a similar problem when part of the attached html code was cut off, but if I created a warning about the internal html or forced it to scroll, it appeared.

Then I came across an article that showed that IE8 was redrawing the panel incorrectly. http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

The only way I managed to get it to work is to add a class to it, wait, and then delete the class. If I didn’t wait, he seems to have missed the execution.

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

Answer 2

What happens if you remove rel="stats" ?

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

Answer 3

I can confirm this problem. I created a similar AJAX answer to the original submitter. Some initial information, then a data loop to create 8 different content values. When the page starts, it will load, but IE will only show some data. This small change fixed it.

I had a space on the page (for a set of video tags) inside each div so that I could crop the text if it was too long and use a span with the title attribute as hovertip. If the tag range has been formatted as follows:

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

this will not work, whereas:

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

worked fine. Of course, I noticed my mistake that there is no closing span tag. A fix for this also worked, but the main thing I noticed was that IE seems very intolerant of formatting errors on AJAX or, rather, AHAH.

I would see this and guarantee that the returned string contains slightly incorrect HTML. I had the same error, piece of information returned by javascript that you made, and fixing the error fixed this for me.

Answer 4

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

Instead of $('your_container').html( your_content ) try to completely clear the container object and then use append() . So:

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

This is IE. You never know.

Answer 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 that I am missing some things from your functions, but that is its essence.

Answer 6

I had exactly the same problem. I used jQuery.html () to insert a 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 several experiments, I was able to isolate the cause of my problem for line breaks at the beginning of the file.

For example, the initial truncation file begins (quotation marks are added to display 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'); ?> " 

The truncation disappears, removing these first line breaks.

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

Update: Being a solid guy, since I already use the 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 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.