Hi folks,
I'm trying to prompt users to save unsaved fields in pages. The page navigates away even when I call eventArgs.set_cancel(true);
The idea is that if you type something into the textbox and then click a menu item, you're prompted about the unsaved change.
Could someone point out what I'm missing here? The complete code for the page is shown below.
Thanks,
Ken
I'm trying to prompt users to save unsaved fields in pages. The page navigates away even when I call eventArgs.set_cancel(true);
The idea is that if you type something into the textbox and then click a menu item, you're prompted about the unsaved change.
Could someone point out what I'm missing here? The complete code for the page is shown below.
Thanks,
Ken
<%@ Page Language="VB" AutoEventWireup="false" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<title></title> |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
<script type="text/javascript"> |
var isDirty = false; |
var msg = 'This page has unsaved changes.\n\nClick OK to abandon the changes and leave the page.\n\nClick Cancel to stay on the page so you can save your changes.'; |
$(document).ready(function() { |
$(':input').change(function() { |
if (!isDirty) { |
isDirty = true; |
} |
}); |
// window.onbeforeunload = function () { |
// if (isDirty) { |
// confirm(msg); |
// } |
// }; |
}); |
function doNavigation(targetURL) { |
if (isDirty == false) { |
window.location.href = targetURL; |
} |
else { |
if (confirm(msg) == false) { |
return false; |
} |
else { |
window.location.href = targetURL; |
} |
} |
} |
function onClicking(sender, eventArgs) { |
var item = eventArgs.get_item(); |
var navigateUrl = item.get_navigateUrl(); |
if (navigateUrl && navigateUrl != "#" && isDirty) { |
var proceed = confirm(msg); |
if (!proceed) { |
eventArgs.set_cancel(true); |
return false; |
} |
} |
} |
</script> |
</head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<div> |
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20" OnClientItemClicking="onClicking"> |
<Items> |
<telerik:RadMenuItem EnableViewState="false" runat="server" NavigateUrl="~/dashboard.aspx" |
Text="Dashboard" PostBack="False"> |
<Items> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/scheduling.aspx" PostBack="False" |
Text="Scheduling" /> |
</Items> |
</telerik:RadMenuItem> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem PostBack="False" runat="server" NavigateUrl="~/contacts.aspx" |
Text="Contacts" /> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem PostBack="False" runat="server" NavigateUrl="~/items.aspx" Text="Items"> |
<Items> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/resetitems.aspx" PostBack="False" |
Text="Debug: Reset Items" /> |
</Items> |
</telerik:RadMenuItem> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/sales.aspx" Text="Sales" PostBack="False" /> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/purchases.aspx" Text="Purchasing" |
PostBack="False" /> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem runat="server" Text="Production" NavigateUrl="~/workorders.aspx" |
PostBack="False" /> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/projects.aspx" Text="Projects" |
PostBack="False"> |
<Items> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/files.aspx" PostBack="False" Text="Files" /> |
</Items> |
</telerik:RadMenuItem> |
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/events.aspx" Text="Events" PostBack="False"> |
<Items> |
<telerik:RadMenuItem runat="server" NavigateUrl="~/scheduling.aspx" PostBack="False" |
Text="Scheduling" /> |
</Items> |
</telerik:RadMenuItem> |
<telerik:RadMenuItem IsSeparator="true" /> |
</Items> |
</telerik:RadMenu> |
<br /> |
<br /> |
<br /> |
<telerik:RadTextBox ID="RadTextBox1" Runat="server"> |
</telerik:RadTextBox> |
</div> |
</form> |
</body> |
</html> |