Trying to update text in JQueryUI modal dialog and it doesnt show till the end

What I am trying to do is to simulate a status dialog using a modal dialog box processing multiple long lived actions, and updating the text of the dialog with status information after each action. What I'm currently getting is the dialog doesnt show till the end and all the messages are there, instead of getting the dialog at the beginning, with updates to the status after each operation completes.

function TestModalUpdate() {
    $("#dialog").dialog({
        bgiframe: true,
        height: 140,
        modal: true
    });
    var i
    for(i = 0; i < 5; i++) {
        doSomething();
    }
}
function doSomething() {
    wait(1000);
    $('#dialog').html($('#dialog').html()+"<p>new line</p>")
}
function wait(msecs) {
    var start = new Date().getTime();
    var cur = start
    while(cur - start < msecs) {
        cur = new Date().getTime();
    }
} 

<in开发者_开发知识库put type="button" id="Test" onclick="TestModalUpdate();" value="test"/>
<div id="dialog" title="Basic modal dialog">
</div>

Try using the open callback and performing all your work from that callback function. That way, the dialog is already open before you even begin your other processing.

$("#dialog").dialog({
        bgiframe: true,
        height: 140,
        modal: true,
        open: function(event, ui) {
            doSomething();
        }
});