For the jQuery Dialog to appear, we need to
disable the default post back events, we would have already done this by adding
the line.
event.preventDefault();
But now, once the user clicks the confirm
button we need to invoke the server side event to process the data, to do so we
need to initiate a postback, we can do so by adding the following line.
<%= Page.ClientScript.GetPostBackEventReference(this.cmdShowDialog, string.Empty) %>;
Full example code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dialog</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() {
var
confirm = function()
{
$(this).dialog("close");
<%= Page.ClientScript.GetPostBackEventReference(this.cmdShowDialog, string.Empty) %>;
}
var
cancel = function() { alert('No Button Clicked'); }
$('#cmdShowDialog').click(function(event) {
event.preventDefault();
$('#myDialog').dialog
(
{
modal: true,
close: function(event, ui){alert('Dialog
Closed');},
buttons:
[
{
text: "Yes",
click:
confirm
},
{
text: "No",
click:
cancel
}
]
}
);
});
$('#cmdHideDialog').click(function() {
$('#myDialog').dialog('close');
});
});
</script>
</head>
<body>
<div id="myDialog" style="display:none;" title="Hello
Dialog">
Please Select Yes/No to Proceed. <br /><br
/>
</div>
<form id="frmDialog" runat="server">
<div>
<asp:Button
ID="cmdShowDialog"
runat="server"
Text="Show Dialog" />
<input type="button"
id="cmdHideDialog"
value="Hide Dialog" />
</div>
</form>
</body>
</html>
Run the application, click on the Show
Dialog button, the Dialog will get displayed.
Once the Yes, button is clicked the Dialog gets closed and the cmdShowDialog_Click event is called in the server side, code-behind file.
1 comment:
Still helping...tks
Post a Comment