As the update panel is going to reload the contents of the html. You’ll have to listen for the UpdatePanel to complete and recreate the datepicker.
Here is a very basic sample. This doesn’t take into account multiple update panels on your page or potential memory leaks from not properly destroying your datepicker.
Another thing to note when mixing ASP.NET Ajax and jQuery be careful because the both use the $ in different contexts.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="UpdateMe"
onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
//Put your code here...
}
});
</script>
“endRequest Event” Source @ Microsoft
“Sys.WebForms.PageRequestManager Class” Source @ Microsoft