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

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


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.