UpdateProgress with an UpdatePanel

Question

I want to show the UpdateProgress on page A when a user clicks on the "Next" button to go to next page. The next page is Page B, which has heavy data loading.

When the button is clicked, it doesn't show the UpdateProgress.

What's missing from this code, and how can it be made to show?

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate >
       Please wait ...
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnNext" EventName="Click" />
   </Triggers>                                    

   <ContentTemplate>                                          
      <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel"onclick="btnCancel_Click" />                                    
      <asp:Button ID="btnNext" runat="server" TabIndex="2" Text="Next" onclick="btnNext_Click" />
   </ContentTemplate>                                 
</asp:UpdatePanel>

Answer 1

Couple of things to try:

1) Move the UpdateProgress control inside the UpdatePanel

2) Remove the AssociatedUpdatePanelID attribute from the UpdateProgress tag

I'm banking on Option 1 doing the trick.

EDIT

Here is a non-ProgressTemplate way, using client-side event handlers:

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args)
{
     // some code to show image, e.g:
     document.getElementById('somedivwhichasimage').className = 'show';
}

function EndRequestHandler(sender, args)
{
     // some code to hide image, e.g:
     document.getElementById('somedivwhichasimage').className = 'hidden';
}
</script>