jquery ui datepicker inside asp.net UpdatePanel - asp.net

Question

I have a web page, where I'm using a jQuery UI datepicker on an asp.net textbox, which is located inside an UpdatePanel. Here is a description of what I do roughly
<script type="text/javascript">
$(document).ready( function() { $(".datepicker").datepicker(); } );
</script>
<asp:UpdatePanel ... >
...
<asp:TextBox runat="server" CssClass="datepicker" />
<asp:Button runat="server" />
...
</asp:UpdatePanel>
When I first load the page, everything works fine. When clicking inside the textbox, the datepicker pops up. But when I click the button, and an async postback is executed, the datepicker no longer pops up, when I click the field again.
I know that the problem is because the UpdatePanel completely replaces all the contained HTML when it is updated, so in effect, it is a new text field, which has not been initialized with the datepicker functionality.
I guess that I should not use $(document).ready() here to initialize my datepickers, but where is a good place to place the initialization code? Or is there a way that I can retrigger the initialization code after an AJAX update?

Answer 1

add the script behind , that's what I do.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
$(".datepicker").datepicker();
});
</script>

Answer 2

Add this script at the end of your page.
Replace the initialize() function with whatever code you want to run every time there is a partial postback from an updatepanel.
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
initialize();
}
}
</script>

Answer 3

Replaces the class name '.datepicker' by the name of the object within the page.
Example:
<script type="text/javascript">
$(document).ready( function() { $("#<%=DateTextBox.ClientID %>").datepicker(); } );
</script>
<asp:UpdatePanel ... >
...
<asp:TextBox runat="server" ID="DateTextBox"/>
<asp:Button runat="server" />
...
</asp:UpdatePanel>}

Answer 4

$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler() { $(".datepicker").unbind().mask("99/99/9999").datepicker() };
$.getScript("../Scripts/jquery.maskedinput.min.js", function () {
$(".datepicker").mask("99/99/9999");
});
$.getScript("../Scripts/jquery-ui-1.11.3.min.js", function () {
$(".datepicker").datepicker()
});
});