Javascript updates UI only when alert() is used in internet explorer with AJAX

Question

I'm having a problem in Internet Explorer, it works fine with Firefox.

I have a java script function that updates UI (Screen Content) which is called before AJAX function. But it doesn't update UI until an alert box prompt is used. Without alert box it doesn't update UI before AJAX function. It updates UI after AJAX function even if it is called before AJAX function

If i use following code, the UpdateUI() doesn't update the UI at all before AJAX function call, it updates UI after AJAX function call. I want it to update UI before AJAX function call (actually im displaying a loading bar before AJAX call)

UpdateUI(); // java script function, it just updates inner HTML of a DIV

// AJAX function call here with Async = false

But If i use following code, the UpdateUI() update the UI before AJAX function call, but this method includes an alert prompt. I don't want to use alert

UpdateUI(); // java script function, it just updates inner HTML of a DIV

alert('hellow');

// AJAX function call here with Async = false

It's working fine in Firefox but not in Internet Explorer 8

Answer 1

Browsers don't usually reflow (refresh) the UI when there is an active JS thread. It waits until it has flushed all events from ts event queue before performing a reflow. Think of this like a single threaded loop in which the browser has to perform all its events.

Reflow usually gets the least priority in certain situations, however you can force the browser to reflow by requesting certain attributes on DOM elements like getComputedStyle or offsetX/y etc. Basically any request that requires the browser to layout the UI to respond will perform a reflow.

This is the best article I had found sometime back when I was facing a similar problem.

The easiest and fool-proof trick I can suggest is to split your code into two methods and call the method that requires a prior-reflow in a timeout after 0mills. This gives the browser some breather to perform a reflow before it calls method2. This works exactly like the alert() trick you tried and found working.