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?

Using JQuery UI datepicker inside UpdatePanel Please SEE:[Answer][1] [1]: http://stackoverflow.com/questions/520645/jquery-datepicker-ms-ajax-updatepanel-doesnt-work-after-post-back — PMD, May 14 '12 at 15:31

score 23 · Answer 1 · edited Jan 31 '11 at 15:33

23

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>

edited Jan 31 '11 at 15:33

Kevin Albrecht

6,974
7
44
56

answered Jan 29 '10 at 16:21

Fred

1,234
3
11
22

sorry, some codes were not pasted, $(".datepicker").datepicker(); } ); – Fred Jan 29 '10 at 16:25
That would only execute when the UpdatePanel posts back, right? I would still need the $(document).ready(...) ? – Pete Jan 29 '10 at 16:35

score 6 · Answer 2 · answered Jan 29 '10 at 16:39

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>

Hernan Betancur · Answer 3 · 2014-02-17T19:36:44.790

0

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>}

edited Feb 17 '14 at 19:36

answered Feb 17 '14 at 17:16

Hernan Betancur

1
1

score 0 · Answer 4 · answered Mar 12 '15 at 20:51

    $(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()
        });
    });

jquery ui datepicker inside asp.net UpdatePanel

4 Answers4