JQuery datetimepicker being disabled when UpdatePanel updates

Question

I have the following code in my aspx page -

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
      <ContentTemplate>
         <div id="Div1" runat="server">
            <asp:Button ID="sButton" runat="server" Width="87px" OnClick="searchButton_Click"/>
         </div>
      </ContentTemplate>
   </asp:UpdatePanel>
   <script>
      $('#MainContent_fD').datetimepicker();
      $('#MainContent_uD').datetimepicker();
   </script>
</asp:Content>

So on page load, on clicking in the textBoxes MainContent_fD & MainContent_uD this reveals the JQuery date time picker.

However when a user clicks sButton , firing the UpdatePanel, and then goes to use the date time pickers again, they have been disabled.

I have tried moving the script block to the site master page, however again this works on initial page load however not at the UpdatePanel has updated. How can I resolve this?

Answer 1

Whenever the update panel updates, you need to re-initialize the date time picker. You can fire a script when the update panel refreshes. see:

How can I run some javascript after an update panel refreshes?