jquery - 微软更新面板和 jquery datepicker

Question

我在更新面板中有一个 jquery ui datepicker 文本框。由于某种原因，我无法再单击它来加载日期选择器。这就是我所拥有的。

// 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 1

我认为您遇到的情况是，您的日期选择器在异步回发后不再工作。如果是这种情况，这里是解决它的一种方法 -

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>

此方法使用 Sys.WebForms.PageRequestManager JavaScript class这是可能的，因为你有 Script Manager在您的 .aspx 页面上。基本上每次异步回发后都会调用 init() 函数。

请注意，init() 函数也在 DOM 准备就绪时被调用。这允许您在异步回发期间内容发生更改后对 DOM 执行您需要再次执行的所有操作。

我还删除了您的 ClientIdMode 属性，我认为这会导致问题。

/编辑

看到下面的答案后，您当然也可以这样做，为了简洁起见，我喜欢它 -

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

如果这不起作用，这应该总是 -

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