How do I make the UI in IE 8 update as lines of JavaScript are executed in a function, rather than at the end of of the function?

I'm trying to display a progress bar while ajax calls populate a form. I have a function called LOADFORM(). It launches a jquery dialog box, displays a progress bar,开发者_C百科 calles a few other non-async ajax calls to get data. With each data call complete it advances the progress bar and at the end it hides the progressbar and displays the form. This works perfecly in Firfox, but in IE, it just shows the completed form. I doesn't update the UI until the function is done running and by that time everything is complete, but the user has to sit at a uneventful screen for several seconds. How do I make the UI in IE 8 update as lines of JavaScript are executed in a function?

Example:

ActionReportForms.prototype.LoadFormData = function (constId, formType) {
    //HOOK UP DATE PICKER
    $('#' + this.TPLDATEFIELD_ID).datepicker();
    $('#' + this.CRDATEFIELD_ID).datepicker();

    //CLEAR FIELDS
    this.ClearFormFields();

    //HIDE ERRORS
    this.ShowError(false, "");

    //SHOW PROGRESS BAR
    this.ShowProgress(true, 30, "loading...");

    this.ShowDialogBox();

    //POPULATE FIELDS
    this.GetAccountName(constId);
    this.ShowProgress(true, 60, "loading...proposals");
    this.GetProposlas(constId);
    this.ShowProgress(true, 90, "loading...action types");
    this.GetActionTypes();
    this.ShowProgress(true, 100, "loading...complete");
    this.ConstituentID = constId;
    $("#" + this.CONSTITUENTID_ID + ":input").val("");
    $("#" + this.CONSTITUENTID_ID + ":input").val(constId);





    //HIDE
    $('#' + this.TPLDATEFIELD_ID).datepicker("hide");
    $('#' + this.CRDATEFIELD_ID).datepicker("hide");

    //TOGGLE FORM
    if (formType != "") {
        ToggleForms(formType);
    }

    //HIDE PROGRESS BAR
    this.ShowProgress(false, 0, "");

}

Thanks, T

You could chain the different stages together with window.setTimout(). This gives the browser a little time to redraw the page. In this example I set the timeout to 1ms. I am not shure if that will do the trick. Note that I start the chain at the end of the outer function.

ActionReportForms.prototype.LoadFormData = function (constId, formType) {
    //HOOK UP DATE PICKER
    $('#' + this.TPLDATEFIELD_ID).datepicker();
    $('#' + this.CRDATEFIELD_ID).datepicker();

    //CLEAR FIELDS
    this.ClearFormFields();

    //HIDE ERRORS
    var hideErrors = function()
    {
        this.ShowError(false, "");
        window.setTimeout(showProgessBar, 1);
    };

    //SHOW PROGRESS BAR
    var showProgressBar = function()
    {
        this.ShowProgress(true, 30, "loading...");
        this.ShowDialogBox();
        window.setTimeout(populateFields, 1);
    };

    //POPULATE FIELDS
    var populateFields = function()
    {
        this.GetAccountName(constId);
        this.ShowProgress(true, 60, "loading...proposals");
        window.setTimeout(loadProposals, 1);
    };

    var loadProposals = function()
    {
        this.GetProposlas(constId);
        this.ShowProgress(true, 90, "loading...action types");
        window.setTimeout(loadActionTypes, 1);
    };

    var loadActionTypes = function()
    {
        this.GetActionTypes();
        this.ShowProgress(true, 100, "loading...complete");
        this.ConstituentID = constId;
        $("#" + this.CONSTITUENTID_ID + ":input").val("");
        $("#" + this.CONSTITUENTID_ID + ":input").val(constId);

        //HIDE
        $('#' + this.TPLDATEFIELD_ID).datepicker("hide");
        $('#' + this.CRDATEFIELD_ID).datepicker("hide");

        //TOGGLE FORM
        if (formType != "") {
            ToggleForms(formType);
        }

        //HIDE PROGRESS BAR
        this.ShowProgress(false, 0, "");
    };

    // Start with hide errors.
    hideErrors();
};

Chaining via callbacks. Its all about the callbacks. I've been avoiding them because they're ugly and hard to read, but they allow you update the DOM while the rest of your code runs, IN IE. This is un

function LoadFormCall(constId, formType) {
    //HOOK UP DATE PICKER
    $('#' + this.TPLDATEFIELD_ID).datepicker();
    $('#' + this.CRDATEFIELD_ID).datepicker();
    arfObj.hiddenStuff1 = constId;
    arfObj.hiddenStuff2 = formType;
    //CLEAR FIELDS
    arfObj.ClearFormFields();

    //HIDE ERRORS
    arfObj.ShowError(false, "");

    //SHOW PROGRESS BAR
    arfObj.ShowProgress(true, 30, "loading...");

    //OPEN DIALOG
    ShowDialogBox();

    //POPULATE FIELDS
    //THIS CALLS A JQUERY $.ajax call with a callback execute in the success function
    //AND SO BEGINS THE CHAIN.
    arfObj.GetAccountName1(constId, LoadFormCall2); 
};

function LoadFormCall2() {
    constId = arfObj.hiddenStuff1;
    arfObj.ShowProgress(true, 60, "loading...proposals");
    arfObj.GetProposals1(constId, LoadFormCall3);
};

function LoadFormCall3() {
    arfObj.ShowProgress(true, 90, "loading...action types");
    arfObj.GetActionTypes1(LoadFormCall4);
}

function LoadFormCall4(){
    arfObj.ShowProgress(true, 100, "loading...complete");
    arfObj.ConstituentID = constId;


    $("#" + arfObj.CONSTITUENTID_ID + ":input").val("");
    $("#" + arfObj.CONSTITUENTID_ID + ":input").val(constId);

    //HIDE
    $('#' + arfObj.TPLDATEFIELD_ID).datepicker("hide");
    $('#' + arfObj.CRDATEFIELD_ID).datepicker("hide");

    //TOGGLE FORM
    if (arfObj.hiddenStuff2 != "") {
        ToggleForms(arfObj.hiddenStuff2);
    }

    //HIDE PROGRESS BAR
    arfObj.ShowProgress(false, 0, "");
}

This only appears to work in Firefox because it fakes synchronous XMLHttpRequest using asynchronous XMLHttpRequest. And while it's waiting for the request to complete, it updates the screen, because it hasn't got anything better to do.

But really, you should stop using synchronous XMLHttpRequest.