prompt before leaving page (ModalPopUp)


Hi,
I want to use a ModalPopUpExtender to prompt user that there is some unsaved data on page. It should works like 'onbeforeunload' function, but I want to use my own popup for a confirmation (ModalPopUpExtender). Please provide me with some sample code. Thanks a lot.
8
steensh
5/19/2008 11:46:01 AM
📁 asp.net.client-side
📃 24353 articles.
⭐ 2 followers.

💬 4 Replies
👁️‍🗨️ 14255 Views



there is some sample..
http://mattberseth.com/blog/2007/07/modalpopupextender_example_for.html
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx
i hope these help you

ihsany
######
Make It Easy
--------------dont forget to click ------------------
0
ihsany
5/19/2008 12:08:03 PM

I doubt very much that you can do that, as you would need to dig into browser functionality, which is really not possible. Always remember that you do not own the browser, the user does!
Here is how to do it with the built in browser method:
<script type="text/JavaScript">
<!--
window.onbeforeunload = function ()
{
 var closeMessage =
  'You are exiting this page.\n' +
  'If you have made changes without saving, your changes will be lost.\n' +
  'Are you sure you want to exit?';
 if ( window.event )
 {
  // IE only...
  window.event.returnValue = closeMessage;
 }
 else
 {
  // Other browsers NOTE: Never tested...
  return closeMessage;
 }
}
// -->
</script>
And here is how to prevent it from running if you happen to not want it to run under certain conditions.
     LinkButton1.Attributes.Add("onclick", "window.onbeforeunload = null;");
NC...
-1
NC01
5/19/2008 12:44:00 PM

I've already known how to use AJAX ModalPopUp and 'onbeforeunload'. What I need is how to combine them.
My code:
window.onbeforeunload = function (e) 
{
if (typeof(postBack) != "undefined" && postBack == true)
return;
if(hasChanges())
{
document.getElementById('<%=btnConfirm.ClientID%>').click();

}
}

<asp:Button ID="btnConfirm" runat="server" Style="display: none" />

<asp:Panel ID="pnlConfirm" runat="server" Style="display: none">
<%--panel definition with 2 buttons: btnConfirmOK and btnConfirmCancel --%> </asp:Panel>

<mpe:ModalPopupExtender ID="mpeConfirm" runat="server" OkControlID="btnConfirmOK" CancelControlID="btnConfirmCancel" PopupControlID="pnlConfirm" TargetControlID="btnConfirm">
</mpe:ModalPopupExtender>

 
hasChanges() obviously check if there was modification on page. btnConfirmOK and btnConfirmCancel should act like default JavaScript OK and Cancel button in default JavaScript pupup.
I think there should be 3 steps:
1. remeber user clicked redirection page 
2. display modalpopup
3. redirect user to clicked page if he chose not to save data 
Am I thinking correct? Please help me with this.
-1
steensh
5/19/2008 1:03:51 PM

steensh:

I've already known how to use AJAX ModalPopUp and 'onbeforeunload'. What I need is how to combine them.

My code:

window.onbeforeunload = function (e) 
{
if (typeof(postBack) != &quot;undefined&quot; &amp;&amp; postBack == true)
return;
if(hasChanges())
{
document.getElementById(&#39;&lt;%=btnConfirm.ClientID%&gt;&#39;).click();

}
}

&lt;asp:Button ID=&quot;btnConfirm&quot; runat=&quot;server&quot; Style=&quot;display: none&quot; /&gt;

&lt;asp:Panel ID=&quot;pnlConfirm&quot; runat=&quot;server&quot; Style=&quot;display: none&quot;&gt;
&lt;%--panel definition with 2 buttons: btnConfirmOK and btnConfirmCancel --%&gt; &lt;/asp:Panel&gt;

&lt;mpe:ModalPopupExtender ID=&quot;mpeConfirm&quot; runat=&quot;server&quot; OkControlID=&quot;btnConfirmOK&quot; CancelControlID=&quot;btnConfirmCancel&quot; PopupControlID=&quot;pnlConfirm&quot; TargetControlID=&quot;btnConfirm&quot;&gt;
&lt;/mpe:ModalPopupExtender&gt;


hasChanges() obviously check if there was modification on page. btnConfirmOK and btnConfirmCancel should act like default JavaScript OK and Cancel button in default JavaScript pupup.

I think there should be 3 steps:

1. remeber user clicked redirection page 

2. display modalpopup

3. redirect user to clicked page if he chose not to save data 

Am I thinking correct? Please help me with this.


I doubt if that will work for the reasons that I stated in my previous post.
NC...
 
-2
NC01
5/19/2008 1:13:14 PM
Reply: