In this article I will explain how to detect ASP.Net ScriptManager and UpdatePanel AsyncPostBack in JavaScript.
To illustrate you with an example I have added an ASP.Net ScriptManager, an UpdatePanel and a Button that will cause the Asynchronous PostBack
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "Button1" EventName = "Click" />
</Triggers>
</asp:UpdatePanel>
</form>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_beginRequest(function (sender, e) {
//Event raised when the Async Postback is started.
//Detect whether the request is Async
var isAsync = sender._postBackSettings.async;
//Detect Id of the control that caused the postback.
var controlId = sender._postBackSettings.sourceElement.id;
//Id of the updatepanel that caused the postback
var updatePanelId = sender._postBackSettings.panelID.split('|')[0];
});
}
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
//Event Raised when the Async Postback is completed.
}
});
</script>
</body>
</html>
As you can see above I have a also added a JavaScript event handler to handle the Start and End of the ASP.Net Asynchronous PostBack