Why is there a time lag when trying to change the text on a button in IE using JQuery?

Question

I have some Ajax that runs on a button click. Sometimes it takes a few seconds to return, so I wanted a visual clue to the user that the browser was doing something.

So, I have this:

    $('#SubmitButton').attr("value", "Working...");
    $('#SubmitButton').attr("disabled", true);

    //Synchronous Ajax call goes here

    $('#SubmitButton').attr("value", "Submit");
    $('#SubmitButton').attr("disabled", false);

As you can see, it changes the text on the button, and disables it. When the Ajax call comes back (it's synchronous, remember), the button changes back.

In Firefox, this works great.

In IE, it's...odd. It doesn't run the code in order. It doesn't change the text of the button and launches right into the Ajax call. The browser blocks with the Submit active and saying "Submit."

Right after the Ajax comes back, the button quickly flashes "Working..." then back to Submit."

So, for some reason, IE isn't changing the text of the button until after the Ajax call, even though the code for it is before the Ajax call.

It's acting like this:

    //Synchronous Ajax call goes here

    $('#SubmitButton').attr("value", "Working...");
    $('#SubmitButton').attr("disabled", true);

    $('#SubmitButton').attr("value", "Submit");
    $('#SubmitButton').attr("disabled", false);

Again, this works perfectly in Firefox. But in IE, there's some kind of...lag?

Answer 1

The browser may not have time to update it before the synchronous call is made. Try this:

$('#SubmitButton').attr("value", "Working...");
$('#SubmitButton').attr("disabled", true);

window.setTimeout(function(){
    // Synchronous Ajax call goes here

    $('#SubmitButton').attr("value", "Submit");
    $('#SubmitButton').attr("disabled", false);
}, 100);