In
the post Asp.net jQuery dynamic Dialog, we have seen on how create a Dynamic dialog with dynamic content,
here we shall see on how to add Buttons to the Dynamic Dialog at runtime.
We can create Dynamic dialog content, by creating the DIV tag at run time and add button to the dynamic dialog by adding a button array to the Dialog as follows.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
Dynamic 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"
/>
<script type="text/javascript">
$(document).ready(function() {
$('#cmdShowDialog').click(function(event){
event.preventDefault();
var
$dialog = $('<div>Dynamic Dialog with
Buttons.</div>')
.dialog
({
title:'Dynamic Dialog',
width:300,
height:200,
buttons:
[{
text: "Ok",
click: function()
{
$dialog.dialog('close');
}
},
{
text: "Cancel",
click: function()
{
$dialog.dialog('close');
}
}]
});
});
});
</script>
</head>
<body>
<form id="jQueryDialog" runat="server">
<div>
<asp:Button ID="cmdShowDialog" runat="server" Text="Show Dialog" />
</div>
</form>
</body>
</html>
Run the application, click on the Show Dialog button, the Dialog will get displayed.
Notice that the text is the Dialog is formed dynamically after clicking the Show Dialog button; also the buttons Ok/Cancel mentioned in the button array are added to the Dialog dynamically.
We can also handle the click events of these dynamic buttons; in this sample we are closing the Dialog on the click of the Ok/Cancel buttons. We can add only client side HTML buttons dynamically; we cannot add Asp.Net server buttons dynamically.
No comments:
Post a Comment