jquery ui datepicker inside asp.net UpdatePanel

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>