Question: I have a jquery ui datepicker textbox within an update panel. For some reason I can no longer click on it to load the datepicker. This is what I have.

```
// Datepicker settings
$('body').on('load', '#dpWorkWeek', function() {
    $(this).datepicker({
        changeMonth: true,
        changeYear: true,
    });
});

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
      <asp:TextBox ID="dpWorkWeek" runat="server" ClientIDMode="Static" CssClass="dpWorkWeek"></asp:TextBox>

 </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" />
</Triggers>

```

Answer: 
I think what you are experiencing is that your date picker no longer works after an async postback. If this is the case here is one way of solving it -

```
window.onload = function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}

function endRequestHandler(sender, args) {
    init();
}

function init() {
    $("#<%=dpWorkWeek.ClientID %>").datepicker({
        changeMonth: true,
        changeYear: true
    });
}

$(function() { // DOM ready
    init();
});

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
      <asp:TextBox ID="dpWorkWeek" runat="server" CssClass="dpWorkWeek"></asp:TextBox>
 </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" />
</Triggers>

```

This approach uses the [Sys.WebForms.PageRequestManager JavaScript class](http://msdn.microsoft.com/en-us/library/bb311028.ASPX) and is possible because you have a [Script Manager](http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx) on your .aspx page. Basically after every async postback the init() function will be called.

Notice the init() function is also called in DOM ready. This allows you to do everything to the DOM you need done again after content has changed during the async postback.

I also removed your `ClientIdMode` attribute, I think this will cause issues otherwise.

/edit

After seeing the answer below you can certainly do this too, I like it for brevity - 

```
function pageLoad(sender, args) {
    $("#<%=dpWorkWeek.ClientID %>").datepicker({
        changeMonth: true,
        changeYear: true
    });
}

```

And if that doesn't work this should always -

```
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, args) {
 // ...
});

```
Yeah, the JQuery datepicker doesn't work well in an update panel. 

The problem is because the fields lose their bindings because your `body` `onLoad` function isn't called when the `UpdatePanel` triggers. So you have a few options:

* Move the entire field outside the update panel
* If you can't simply move it outside the update panel, you can use an alternate field, and JQuery will update both fields when the date value changes
	+ The problem with this approach, ignoring the fact that you need two fields, is that the popup datepicker will actually appear attached to/near the normal field, which may be a long way away from the update panel.
* Rebind the datepicker on every postback
	+ The problem with this approach is that if the update panel is triggered while the datepicker is open, the datepicker closes. If this is likely to occur, you'd have to write some logic to detect when it opens/closes, and reopen it after binding it (if necessary).

If the `UpdatePanel` doesn't fire on a timer or anything the problem with the last approach might not matter to you. To use the "always rebind" method, move the initialization into the javascript function `pageLoad()`:

```
function pageLoad(sender, args)
{
    // Fix the datepicker here
}

```

**EDIT:** Yes, the `pageLoad` function is called on all postbacks, even though the name seems to imply otherwise.