Forcing a DOM refresh in Internet explorer after javascript dom manipulation

Question

Here is the situation. I have some javascript that looks like this:

function onSubmit() {     doSomeStuff();     someSpan.style.display="block";     otherSpan.style.display="none";     return doLongRunningOperation; } 

When I make this a form submit action, and run it from a non IE browser, it quickly swaps the two spans visibility and run the long javascript operation. If I do this in IE it does not do the swap until after onSubmit() completely returns.

I can force a dom redraw by sticking an alert box in like so:

function onSubmit() {     doSomeStuff();     someSpan.style.display="block";     otherSpan.style.display="none";     alert("refresh forced");     return doLongRunningOperation; } 

Also, the obvious jquery refactoring does not affect the IE behavior:

function onSubmit() {     doSomeStuff();     $("#someSpan").show();     $("#otherSpan").hide();     return doLongRunningOperation; } 

This behavior exists on IE8 and IE6. Is there anyway to force a redraw of the DOM in these browsers?

Answer 1

Mozilla (maybe IE as well) will cache/delay executing changes to the DOM which affect display, so that it can calculate all the changes at once instead of repeatedly after each and every statement.

To force an update (to force an immediate, synchronous reflow or relayout), your javascript should read a property that's affected by the change, e.g. the location of someSpan and otherSpan.

(This Mozilla implementation detail is mentioned in the video Faster HTML and CSS: Layout Engine Internals for Web Developers.)

Answer 2

To continue what ChrisW says:

here's flushing script to flash DOM, so you don't have to call alert(""); (found at http://amolnw.wordpress.com/category/programming/javascript/):

function flushThis(id){    var msie = 'Microsoft Internet Explorer';    var tmp = 0;    var elementOnShow = document.getElementById(id);    if (navigator.appName == msie){       tmp = elementOnShow.parentNode.offsetTop  +  'px';    }else{       tmp = elementOnShow.offsetTop;    } } 

It works for me!!! Thanks for the tip.