Monday, January 20, 2014

Catch Asynchronous postback from Updatepanel in ASP.NET to Show / Hide loading image

In some situation we need to display loading image when the Asynchronous post back in AP.NET Updatepanel. For that we need to catch the Asynchronous postback event. The below code will catch the postback and get the corresponding id of the control that makes the postback. So using the controlId you need to find the Updatepanel from which the postback occurred. So that we can show and hide the loading images in the specific Updatepanel. To find the Updatepanel here i used JQuery's closest function. Check the code.
Client Script:

<script type="text/javascript">
        $(document).ready(function() {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_beginRequest(function(sender, e) {
                    var controlId = sender._postBackSettings.sourceElement.id;
                    var closestUpdatePanel= $('#' + controlId).closest(".UpdatepanelClass")
                });
            }
            prm.add_endRequest(function(sender, e) {
                var controlId = sender._postBackSettings.sourceElement.id;
                var closestUpdatePanel = $('#' + controlId).closest(".UpdatepanelClass")  
            });
        });
</script>

No comments:

Post a Comment