I have an asp.net page in which I have a ckeditor control and ajax file upload tool. I want to show user certain message when he tries to leave the page without saving data.I am beginner in JavaScript/JQuery and would like to find some easy solution directly implemented into asp.net code.If possible can you provide step by step implementation of dirty bit functionality.
`<script>
window.onbeforeunload = function (e) {
return 'Dialog text here.';
};
</script>`
Above code shows me the message even if nothing has changed on the page.How do I apply it to specific control like ckeditor/ajaxuploadctrl etc
Below is the HTML code
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="DirtyBit">
<form id="form" runat="server">
Country : <asp:DropDownList ID="drpCountry" runat="server"></asp:DropDownList>
<br />
<table style="width: 100%; height: 337px;">
<tr>
<td class="auto-style2">TV :</td>
<td class="auto-style3"> <CKEditor:CKEditorControl ID="CKTV" BasePath="/ckeditor/" runat="server"
</CKEditor:CKEditorControl> </td>
</tr>
<tr>
<td class="auto-style6">BV :</td>
<td class="auto-style7"> <CKEditor:CKEditorControl ID="CKBV" BasePath="/ckeditor/" runat="server">
</CKEditor:CKEditorControl></td>
</tr>
<tr>
<td class="auto-style8">CA :</td>
<td class="auto-style9"> <CKEditor:CKEditorControl ID="CKCA" BasePath="/ckeditor/" runat="server">
</CKEditor:CKEditorControl></td>
</tr>
<tr>
<td class="auto-style10">CJ :</td>
<td class="auto-style11"> <CKEditor:CKEditorControl ID="CKCJ" BasePath="/ckeditor/" runat="server">
</CKEditor:CKEditorControl></td>
</tr>
<tr>
<td class="auto-style1">
Visa Form :</td>
<td><table id="attachedfiles">
<tr>
<td class="auto-style12">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:AjaxFileUpload ID="AjaxFileUpload11" runat="server" MaximumNumberOfFiles="5"
Width="400px" OnUploadComplete="OnUploadComplete" />
</td>
</tr>
</table></td>
</tr>
<tr>
<td class="auto-style4">
</td>
<td class="auto-style5">
<asp:Button ID="btnSave" runat="server" Height="30px" OnClick="btnSave_Click" Text="Save" Width="109px" />
</td>
</tr>
<tr>
<td class="auto-style4">
</td>
<td class="auto-style5">
</td>
</tr>
</table>
</form>
</div>
</asp:Content>