Javascript to detect start and end of AsyncPostback of specific Update Panel

Question

<script type="text/javascript">

       var prm = Sys.WebForms.PageRequestManager.getInstance();

       prm.add_endRequest(endRequest);
       prm.add_initializeRequest(initializeRequest);
       var _postBackElement;

       function initializeRequest(sender, e) 
       {
           if (prm.get_isInAsyncPostBack()) 
           {
               e.set_cancel(true);
           }

           _postBackElement = e.get_postBackElement();

           document.getElementById('loadingm').style.visibility = 'visible';
       }

     function endRequest(sender, e) 
           {
               $find('PopCustom_').show();
               document.getElementById('loadingm').style.visibility = 'hidden';  
           }
    </script> 

This code will work on every AsyncPostback, but I want it to work Update-Panel specific. Not being too familiar with JS, I don't know where I to do the modification.

Help would be greatly appreciated.

Answer 1

To trigger of the start is pretty easy because something has to trigger it so you can always add code to whatever is triggering the refresh.

To trigger off of the completion of an UpdatePanel being refreshed is not as straight forward but the framework has provided some javascript functionality to help with this. The following javascript code will trigger off of an UpdatePanel refresh completing:

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.pageLoaded(YourJavascriptFunctionNameHere); 
//or
prm.add_pageLoaded(YourJavascriptFunctionNameHere);

Then implement the function you registered:

function YourJavascriptFunctionNameHere(sender, args)
{
    // do something
}

If you want you can use the same method to work off the start of the UpdatePanel refresh as well using

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.beginRequest(YourJavascriptFunctionNameHere);
// or
prm.add_beginRequest(YourJavascriptFunctionNameHere);

I think you can figure out what element is causing the refresh from the sender or args params but you will need to read more about this function on MSDN.

EDIT: (from the MSDN article, an example of figuring out which UpdatePanel is refreshing)

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('external') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }
}

Answer 2

Best solution so far is:

var cmdAuthoriseButton ='<%= cmdAuthorise.ClientID %>'; 

function beginReq(sender, args){ 

   if (cmdAuthoriseButton == args._postBackElement.id)

   {

       // shows the Popup 

       $find(ModalProgress).show();        

   }

}