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.

score 2 · Answer 1 · answered Apr 02 '13 at 11:16

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

answered Apr 02 '13 at 11:16

Evgeny Gorb

1,442
2
13
24

This is a great answer, however, it does not work when you have multiple update panels on the page, since all of them trigger this. – Shiroy Aug 29 '19 at 00:44
@Shiroy: in the beginRequest function you can obtain an ID of an update panel which initiated the request, by using `args.get_updatePanelsToUpdate();` – Evgeny Gorb Aug 29 '19 at 14:49

score 0 · Answer 2 · answered Mar 24 '10 at 16:16

0

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

answered Mar 24 '10 at 16:16

CeejeeB

3,034
4
25
32

score 0 · Accepted Answer · answered Mar 24 '10 at 16:20

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.

Hide UpdatePanel during UpdateProgress

3 Answers3

Linked