Question

I have a JavaScript class that displays a partially-opaque div over top of the content of another div when an Ajax request is sent to the server.

When the request returns, the JavaScript class hides the partially-opaque div….it works great…sort of.

Right now, in IE9, when the Ajax request is complete, the partial-opacity is only hidden if the user moves their mouse.

So, my question is, how do I force the browser to do what it’s supposed to do?

This is my extremely simple function that is called after the request returns to the browser:

_hideBlockingDiv: function() {
    if (this.get_blockingDivClientID()) {
        var blockingElement = $get(this.get_blockingDivClientID());

        if (blockingElement != null) {
            blockingElement.style.display = 'none';
            //I know that this method is executing correctly because I "hi" showed
            //up properly...but the element remained visible:
            blockingElement.innerHTML = 'hi';
        }
        //if I add the alert then everything works fine in IE9
        //if I don't then the page will remain the same until the user moves their mose
        //alert("done");



    }
}

Please note that I am not using JQuery.
I am using the AJAX.NET library since I am a .NET developer (and JQuery didn’t become popular until years after I implemented my Ajax-enabled server controls)

Thanks

-Frinny

Answer 1

It turns out that the problem only exists in the beta version of IE9 that I was using at the time. This problem went away once the full version of IE9 was released.