window.beforeunload prompt does not hide the ajax update progress

Question

I used the code capturing the

$(window).on('beforeunload unload', function (element) { 
  return 'Are you sure you want to leave?';
});

On the same page I have a update panel and a update progress. If user navigates to other page by clicking on button the prompt message appears and the update progress also kick in.

If the user select no in the alert window and stays on the same page the update progress still stays on in visible state.

Is there any way that I can capture the user's response to the "Changes may not be saved prompt" so based on the result I will hide the update progress image.

 <asp:UpdatePanel runat="server" ID="ProductSelectorContainerPanel" UpdateMode="Conditional">
                <ContentTemplate>

 <asp:Button runat="server" ID="DoPartialPostBack" OnClick="DoPartialPostBack_Click" Text="Do Postback"/>

   </ContentTemplate>
 </asp:UpdatePanel>

.cs Code

protected void DoPartialPostBack_Click(object sender, EventArgs e) { Response.Redirect("page2.aspx"); }

Now if you add a debugger the Response redirect gets called in first. Which will call the beforeunload code for the jquery. and based on the selected result(in my case stay) the update progress will fire as its a postback.

Answer 1

...so based on the result I will hide the update progress image

Just hide it in the beforeunload handler. If the user leaves the page, it doesn't matter whether it's hidden; they've left the page. If they don't, you have the result you want.

Answer 2

I changed code for adding a full postback trigger for the button. So the button does behavior like a normal button and button call is stopped when user selects the no in the alert.