There appear to be two issues with the original question:
1) The sleep function didnt properly simulate a long running operation such as an HTML request.
2) IE, at least v8 and v9 dont appear to update their display correctly the way Firefox does. Anyone know a way to force IE to process the UI update?
The following works fine on Firefox but IE Doesnt update the display of the running count until the end unless I insert an alert which forces a pause. If there are 50 items and the batch size is 10, I wanted the HTML displaying the running count to show 10,20,30,40,50. In IE it jumps from 10 to 50 at the end whereas Firefox updates correctly.
while (done == false) {
var url = 'myLongRunningOperation.com/doSomething.html&LastID='+lastPriorIndex;
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(data) {
soFar += data.Succeeded + data.Failed;
$('#numCompleted').val(soFar).show();
LastPriorIndex= data.LastID;
if (soFar >= totalNumberOFDocs) {
done = true;
}
},
data: {},
async: false
});
}
I’m trying to use a JQuery UI modal dialog as a status dialog. First it should display, then process the update messages as a long running operation completes and adds to the HTML. However, the dialog doesnt display till the very end and then shows up with all of the messages. If I put in an alert just after showing the dialog, it will show but the message updates all show up at once after the operations are all done. I’m hoping all I need is some sort of check-the-message-queue function to get it to update because the alert causes the dialog to show. Or possibly it’s my method of simulating a log running operation that’s the problem in simulating a sleep.
$(function() {
$("#dialog2").dialog({
bgiframe: false
,height: 140
,modal: true
,autoOpen: false
});
});
function TestModalUpdate2() {
$('#dialog2').dialog("open");
//alert('foo'); //if this alert is present the dialog shows before the doSomething calls execute but wont update till all of them are done
$('#dialog2').show();
var i
for(i = 0; i < 5; i++) {
doSomething($('#dialog2'));
$('#dialog2').show();
}
}
function doSomething(obj1) {
wait(1000);
obj1.html(obj1.html()+"<p>new line</p>")
//alert('this will also cause the dialog to update in between doSomethings')
}
function wait(msecs) {
var start = new Date().getTime();
var cur = start
while(cur - start < msecs) {
cur = new Date().getTime();
}
}
<input type="button" id="Test2" onclick="TestModalUpdate2();" value="Test2"/>
After further research indicating that operating in synchronous mode can be troublesome, I converted it to a recursive version which worked.