Hide UpdatePanel during UpdateProgress

Question

I'm looking for the easiest possible way to hide an UpdatePanel while waiting for the submit response to come back. Stuff like described here - using Ajax Control Toolkit and the UpdatePanelAnimationExtender is both overkill and causing some issues, namely:

• Because there are a couple of hidden panels in the page it gets all messed up and hides the wrong panels. I have no idea why this is happening;
• I can't find a way to specify that only one button is supposed to trigger the animation. I did specify a in the UpdatePanel, but it seems that is ignored and all the controls inside the panel trigger the animation.

A simple javascript solution would be ideal. The problem here is ASP.NET likes to generate weird IDs for the controls at runtime. Any solutions for that?

Thanks in advance.

Answer 1

I would suggest using jQuery. It will make things easier for you. So to get around the "weird ID" issue you could do some jQuery like this:

$('#<%= someASPControl.ClientID %>').hide();

and to show:

$('#<%= someASPControl.ClientID %>').show();

This is using jQuery to grab a element by id and then you can do what you want with it. The trick is the ".ClientID" that will grab the id that .net sends out.

Answer 2

Handle PageRequestManager beginRequest and endRequest events to control UpdatePanel's visibility during postbacks:

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(
        function (sender, args) {
            $get("<%=someUpdatePanel.ClientID %>").style.display = "none";
        }
    );
    prm.add_endRequest(
        function (sender, args) {
            $get("<%=someUpdatePanel.ClientID %>").style.display = "";
        }
    );

Also add DisplayAfter="0" to assotiated UpdateProgress control to prevent delay between UpdatePanel hiding and UpdateProgress showing

Answer 3

You can uses code tags in your html page and use the ClientId property of a control to spit out the id asp.net generates:

$('#<%= elementName.ClientID %>').hide();

EDIT: This example uses jQuery btw