When
you display a DIV tag with Asp.Net server side controls, in a jQuery Dialog the
server side events will get disabled and the events will not get fired, this happens
because the controls are moved out of the form to display them as a Dialog box,
to enable the events we need to move the controls back to the form, this can be
done by adding the following code to the open event of the Dialog.
open: function(type, data)
open: function(type, data)
{
$(this).parent().appendTo("form");
}
Once this is done, the controls will be
added back to the form and the events triggered by the controls will start to
fire.
Full example code
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>jQuery
Dialog with Controls</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<style type="text/css">
.ui-dialog
.ui-dialog-buttonpane
{
text-align:
left;
}
.ui-dialog
.ui-dialog-buttonpane .ui-dialog-buttonset
{
float:
none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#addUser').dialog(
{
width: 350,
height: 160,
autoOpen: false,
modal: true,
open: function(type, data)
{
$(this).parent().appendTo("form");
}
});
//
$('#cmdAddUser').click(function(event) {
event.preventDefault();
$('#addUser').dialog('open');
});
});
</script>
</head>
<body>
<form id="jQueryDialog" runat="server">
<div id="myDialog" style="display:none;" title="Hello
Dialog">
Hello !!! <br /><br />
</div>
<div id="addUser" style="display:none;" title="Add User">
<table>
<tr>
<td>Name:</td>
<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Age:</td>
<td><asp:TextBox ID="txtAge" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="cmdSave"
runat="server"
Text="Save"
/>
<asp:Button ID="cmdCancel"
runat="server"
Text="Cancel"
/>
</td>
</tr>
</table>
</div>
<asp:Button ID="cmdAddUser" runat="server" Text="Add User" />
</form>
</body>
</html>
Run the application, click on the Add
User button, the Dialog will get displayed.
Now click on the Save/Cancel buttons, you will notice that the page does a post-back and the server side events are triggered by these controls will get fired.
