title: Why doesn't my jQuery UI datepicker work for postbacks when it works fine on initial page loads?
body: <p>I've been trying to integrate the jQuery UI Datepicker into our ASP.NET WebForms application.  The application uses master pages to provide a common look to all pages, and all of the content pages are built inside the ContentTemplate of an UpdatePanel.  I've created a user control to wrap the datepicker's functionality and allow setting of the minDate, maxDate, validators, etc. for each date from the codebehind at runtime.  I also need to deal with the way ASP.NET generates client element IDs.</p>
  
  <p>Over the last week, I've searched high and low, and found lots of tips for getting it to work.  Here is a somewhat simplified version of where I'm at right now.</p>
  
  <pre><code>&lt;asp:TextBox ID="txtTB" runat="server"
      MaxLength="10"
      CssClass="dateBox" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
      // This function enables the datepicker behavior for this textbox by its ClientID.
      function &lt;%=txtTB.ClientID %&gt;() {
          $("#&lt;%=txtTB.ClientID %&gt;").datepicker({
              changeMonth: true, changeYear: true,
              showOn: 'button',
              buttonImage: "&lt;%=Request.ApplicationPath %&gt;/images/calendarIcon.gif",
              buttonImageOnly: true, buttonText: '', duration: '',
              onSelect: function() { }
          });
      };
  
      // Register the above function to execute on initial page load...
      $(document).ready(function(){ &lt;%=txtTB.ClientID %&gt;(); }) ;
  
      // ...and also after any update panel it's on has been refreshed. 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(&lt;%=txtTB.ClientID %&gt;);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I've left out the validators and some other markup that I don't think is related to the issue, but that's the meat of the user control--a textbox, and the jQuery script that enables the datepicker functionality.  The basic idea is to leverage ASP.NET's client IDs to:</p>
  
  <ol>
  <li>Provide a unique function name for the JavaScript function for this specific control</li>
  <li>Register that function with jQuery to enable the datepicker after the initial page
  load</li>
  <li>Register that same function with ASP.NET's PageRequestManager to keep the datepickers enabled after postbacks</li>
  </ol>
  
  <p>Items 1 and 2 are working great.  However, after a postback, the datepicker functionality is lost and I'm left with just a textbox.</p>
  
  <p>But wait!  That's not all.  A given page consists of multiple panels, only one of which is visible at a time.  These are selected by only having the Visible property true for the current panel.  The Visible property for all of other panels are set to false.</p>
  
  <p>Now get this:  The datepickers on the first panel, the one displayed upon initial page load, work as expected.  Those on the second panel just don't show up.  Going back to the first page, the datepickers show up again.</p>
  
  <p>Does anyone have any ideas where I'm going wrong?</p>