AJAX loaded content not visible in IE7 + IE8 with jQuery

Recently I have had a nightmare of a problem with an apparent rendering bug in IE7 + IE8 which had all the hallmarks of the “peakaboo bug”. Firstly, here is a quick explanation of my problem:

AJAX fetches content into an element on the page, in ALL other browsers this content appears and works normally as I would have expected, however in Internet Explorer 7 and Internet Explorer 8 the content would not appear in the page at all.
However upon debugging using the IE9 developer tools (having IE in 7/8 mode), the content still does not appear but when inspecting the DOM, you can see the content IS there but is somehow “hidden”, I quote hidden because no CSS property is controlling this state, and trying to show the content using various CSS tags does not make the content appear.

So after searching tirelessly for a solution and trying the well documented “zoom:1”, “position:relative” and many other possible solutions, only for nothing to work for me, I eventually came to the solution that it would never work… And added a clause to STOP IE7 and IE8 from using AJAX on my site.


FINALLY! I have found a solution, a very strange and weird solution I must admit!

I found out that changing:

$('#' + AAPL_content).html(output);

So that instead we use PURE JavaScript like this:

document.getElementById(AAPL_content).innerHTML = output;

Fix’s the problem and now IE7 and IE8 are functioning as expected, ALL of the time.

Moral of the story…

Never completely trust a JavaScript library to dig you out of the shit, always debug your code and try the impossible solutions as they can sometimes, surprisingly, be a possible cause.

Oh… And… DONT USE .html() to change content… EVER!!

Author: Dean WilliamsI'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

Post Tags:
, , , , , ,
0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments

Thanks for sharing such this kind of solutions.

It is working for my case.

:!: Thank you very much! It helps me!!!! :!:

oooooh :shock:
Thank you very much . This solved my problem too.
"Oh… And… DONT USE .html() to change content… EVER!!" VERY VALUABLE ADVICE

I add (Dear developer, you should go to pure Javacsript when ever possible even inside jquery)

I have a similar issue... in IE8

Unfortunately, your solution above doesn't seem to help my case.

I have an LI that I'm inserting dynamically via ajax call into the UL. I can see the response come back with a simple alert(response).

But the CSS on the LI being returned is causing issues with the Rendering in the Browser, if I remove the CSS all is fine.

On Success:
$('#stuffList li.stuff:last').after(response);

Example CSS:
ul.grid .subgridcontainer {


Any Ideas?