Dynamic Elements are not appearing in IE8 until there is a mouse click

Question

I have an Ajax request that returns search results, and I am dynamically creating DOM elements to display those results. This is working as expected in all the browsers I\'

Answer 1

I ran into this problem not so long ago on IE8.

I think this might be a problem with IE8 not re-rendering the elements in question. An easy way to confirm this is to add a class to the parent element and then remove it. This should trigger IE8 to re-render the element.

If contentBlock is the parent element then you could test with the following:

Javascript version:

// Variable storing the test class name
var testClass = "testClass";
// Add test class to element
contentBlock.className += " "+testClass;
// Remove test class from element
var reg = new RegExp('(\\s|^)'+testClass+'(\\s|$)');
contentBlock.className=contentBlock.className.replace(reg,' ');

jQuery version:

// Variable storing the test class name
var testClass = "testClass";
// Add test class to element and then remove it 
$('#divResults').addClass(testClass).removeClass(testClass);

Just put it at end of the function after you appendChild. Hopefully this should fix your issue.

Reference: http://www.openjs.com/scripts/dom/class_manipulation.php