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:How to Answer[1] [1]: stackoverflow.com/questions/520645/… — PMD
– PMD, Commented May 14, 2012 at 15:31

Kevin Albrecht · Accepted Answer · 2011-01-31 15:33:03Z

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, 2011 at 15:33

Kevin Albrecht

7,0247 gold badges47 silver badges56 bronze badges

answered Jan 29, 2010 at 16:21

Fred

1,2343 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fred Over a year ago

sorry, some codes were not pasted, $(".datepicker").datepicker(); } );

Pete Over a year ago

That would only execute when the UpdatePanel posts back, right? I would still need the $(document).ready(...) ?

TGuimond · Accepted Answer · 2010-01-29 16:39:44Z

6

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>

answered Jan 29, 2010 at 16:39

TGuimond

5,5076 gold badges43 silver badges51 bronze badges

Comments

Hernan Betancur · Accepted Answer · 2014-02-17 19:36:44Z

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, 2014 at 19:36

answered Feb 17, 2014 at 17:16

Hernan Betancur

11 bronze badge

Comments

Roger Perkins · Accepted Answer · 2015-03-12 20:51:24Z

0

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

answered Mar 12, 2015 at 20:51

Roger Perkins

3763 silver badges9 bronze badges

Collectives™ on Stack Overflow

jquery ui datepicker inside asp.net UpdatePanel

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related