Div content loaded via ajax doesn't appear in IE - ajax

Question

Here is the ajax call:
function loadContent( url ) {
jQuery.ajax({
url: url,
success: function(data)
{
// set content
jQuery("#overlayDiv").html(data);
// hide loading spinner
jQuery("#overlayCleared").hide();
}
});
}
It works fine in all the other browsers except IE, in which the div remains empty.. :(
The css I'm using is:
div#overlayDiv {
overflow: auto;
position: relative;
height: 95%;
}
div.video_overlay { /* this class will be added to the div using jQuery */
padding-left: 0px;
width: inherit;
top: 35px;
}
What can I do about it?
Many thanks

Answer 1

Actually, there's also the possibility that you ran into the IE Ajax caching problem, where IE tends to cache results from GET requests. See http://ajaxian.com/archives/ajax-ie-caching-issue.
Solution is to use POST (Note: jquery defaults to GET)

Answer 2

i ran into the same issue a couple of days ago and i simply made this change and it fixed the problem.
(*Considering the url points to localhost)
ensure that your url points to 127.0.0.1 when testing on ie e.g;
use ------> http://127.0.0.1/
instead of ----> http://localhost/

Answer 3

I just solved this very same issue for a big HTML5 application that required IE8 compatibility. The HTML returned by the Ajax calls is quite complex and includes SCRIPT tags with lots of JQuery and standalone JavaScript code.
Apart from the well known IE caching problem (and some others), the key of this kind of issue resides on IE being extremely picky at the time of letting dinamic HTML content be loaded into any element, in my case it was a DIV. Not only is IE picky but shows a sort of random behaviour like rendering a part of the returned HTML or nothing at all without any apparent relationship between the partially rendered HTML and the finally discovered coding issue.
On top of that it throws no HTML coding errors at all making it a real nigthmare to debug this kind of scenarios. In my case I had no choice but recurring to the 90's debugging techniques. I took the returned HTML code from Chrome by copying the node code in the inspection view of this browser, put it into a flat .html file and used this server side code to read the code from the flat file.
$myfile = fopen("flatfile.html", "r") or die("Unable to open the file");
echo fread($myfile,filesize("flatfile.html"));
fclose($myfile);
From then on use the returned code and input it into the container object, start by dividing it into two (letting each part be a coherent piece of code on its own), see what part of the two is rendered and what not and so on with each part until you find the offending piece of code.
One important thing to note is IE8 will work no matter how complex de mix of HTML and Javascript is, you just have to painfully debug your code. If I say so it is becouse you will find many posts stating that IE7,8 cannot handle complex Ajax returned code or that JQuery's .html() property won't work in such cases. It's not true, take your time and you'll find where your issue is, do not give up.