In
the post Asp.Net jQuery UI Dialog Widget, we have seen on how to show the content of a static DIV tag in a dialog
box, but what if we need to have a dynamic content? for example form
validation, we cannot have a static div tag to store all the validation error
messages. Here we shall see on how to form the content of the Dialog box
dynamically.
We can create Dynamic dialog content, by creating the DIV tag at run time rather than using a static DIV tag 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>Hi This content is
Dynamic</div>')
.dialog
({
title:'Dynamic Dialog',
width:300,
height:200
});
});
});
</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; these types of Dynamically dialogs are very useful while validating User Input forms.
No comments:
Post a Comment