I have a chat application, I want that whenever user accidentally or manually closes the browser ,he should get an alert so that various clean up operations could be carried out. I have more thing i itried to use on before event but I want that to be used for a particular web page as all other web pages are also called on before load. Please help
We should prevent or prompt user that on performing these actions he will lose his data.
To explain that I have used two textboxes, one Asp.net submit button with id TestButton.
Other postback controls that I have taken are
One other asp.net button,one checkbox with autopostback property true,one dropdownlist with autopostback property true.
Now I have used all these postback controls so that to show you that we also need to show promt to user about the data lose when user perform actions on these controls.
On submit button we will not show the prompt as we have to submit the data with that control action.Here is the sample code.I have set window.onbeforeunload method on controls change.
<html >
<head id=Head1>
<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>
$(function()
{
// Prevent accidental navigation away
$(':input').bind(
'change', function() { setConfirmUnload(true); });
$('.noprompt-required').click(
function() { setConfirmUnload(false); });
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return ('You have entered new data on this page. ' +
'If you navigate away from this page without ' +
'first saving your data, the changes will be lost.');
}
window.onerror = UnspecifiedErrorHandler;
function UnspecifiedErrorHandler()
{
return true;
}
});
</script>
</head>
<body>
<form id=form1 name=myForm runat=server>
<div>
First Name :<asp:TextBox ID=TextBox1 runat=server></asp:TextBox><br />
<br />
Last Name :<asp:TextBox ID=TextBox2 runat=server></asp:TextBox><br />
<br />
IsMarried :<asp:CheckBox ID=CheckBox1 runat=server /><br />
<br />
<asp:Button runat=server ID=TestButton Text=Submit CssClass=noprompt-required /><br />
<br />
<br />
<br />
<br />
<asp:Button runat=server ID=AnotherPostbackButton Text=AnotherPostbackButton
/><br />
<br />
<asp:CheckBox runat=server ID=CheckboxWhichCausePostback Text=CheckboxWhichCausePostback
AutoPostBack=true /><br />
<br />
DropdownWhichCausePostback<asp:DropDownList runat=server ID=DropdownWhichCausePostback
AutoPostBack=true>
<asp:ListItem Text=Text1></asp:ListItem>
<asp:ListItem Text=Text2></asp:ListItem>
</asp:DropDownList>
<br />
<br />
</div>
</form>
</body>
Above I have used:
$('.noprompt-required').click(function() { setConfirmUnload(false); });
What I have done in this line is I am calling setConfirmUnload method and passing false as argument which will set the window.onbeforeunload to null.
So what that means is on any control where you want that user should not be prompted, give that control the class .noprompt-required and leave other as it is.
