Alex Rivera | Logout

Forcing a DOM refresh in Internet explorer after javascript dom manipulation

Asked 2009-09-09T04:07:36.323
28

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?

Edit
Report

1 Answer

9

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.

answered 2010-11-24T22:12:09.467

Your Answer