| This post discusses about calling AJAX model window from JavaScript. The scenario is checking the UI controls in page and alerting the user if he is leaving the page without saving the data. This shows confirmation window with yes and no buttons. |  |
The Form body code looks as below
1: <body id="Body">
2: <form name="Form" method="post" runat="server">
3: <asp:ScriptManager ID="mgr1" runat="server"></asp:ScriptManager>
4: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
5: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
6: <asp:DropDownList ID="DropDownList1" runat="server">
7: <asp:ListItem Value="no" Selected="True">NO</asp:ListItem>
8: <asp:ListItem Value="yes">YEs</asp:ListItem>
9: </asp:DropDownList>
10:
11: <asp:Button ID="Button1" runat="server" Text="Button"
12: OnClientClick="javascript:return UnSaved();" />
13:
14: <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1"
15: runat="server" TargetControlID="btnHid"
16: PopupControlID="pnlSave" BackgroundCssClass="modalBackground"
17: CancelControlID="btnCancel"
18: PopupDragHandleControlID="panEdit">
19: </ajaxToolkit:ModalPopupExtender>
20: <asp:Button runat="server" ID="Button3" Style="display: none;" />
21: <asp:Panel ID="pnlSave" runat="server" BorderColor="Black"
BorderWidth="3px"
22: Height="100px" Width="180px">
23: <table width="100%">
24: <tr>
25: <td >
26: Do You want to save data?
27: </td>
28: </tr>
29: </table>
30: <br />
31: <asp:Button ID="Button2" runat="server" Text="Save" />
32: <asp:Button ID="btnCancel" runat="server" Text="No" />
33: </asp:Panel>
34: <asp:Button runat="server" ID="btnHid" Style="display: none;" />
35: </form>
36: </body>
The form having two textboxes , one dropdown list and one button control.
The idea is checking whether user is leaving the page without saving the data on button click event. It shows a client side confirmation message box on client click of the button.
1: <script type="text/javascript">
2: function UnSaved() {
3: var selectedCount = 0;
4: var element;
5: for (var i = 0; i < document.forms[0].elements.length; i++)
6: {
7: element = document.forms[0].elements[i];
8: switch (element.type) {
9: case 'text':
10: if (element.value.length > 0) {
11: selectedCount++;
12: }
13: break;
14: case 'select-one':
15: if (element.selectedIndex > 0) {
16: alert(element);
17: if (element.text != "no")
18: selectedCount++;
19: }
20: break;
21: //etc - add cases for checkbox, radio, etc.
22: }
23: if (selectedCount > 0) {
24: break;
25: }
26: }
27: if (selectedCount > 0) {
28:
29: $find("<%=ModalPopupExtender1.ClientID %>").show();
30: return false;
31: }
32: }
33: </script>
34: <title>How our reviews work </title>
35: <style type="text/css">
36: .modalBackground
37: {
38: backckground-color:#CCCCFF;
39: fillter:alpha(opacity=40);
40: opacity:0.5;
41: }
42: </style>
It loops through the controls in page and generates the confirmation box.
| Share this post : |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
