asp.net UpdatePanel 中的 jquery ui datepicker

Question

我有一个网页，我在 asp.net 文本框上使用 jQuery UI 日期选择器，该文本框位于 UpdatePanel 内。这是我大致所做的描述

<script type="text/javascript">
    $(document).ready( function() { $(".datepicker").datepicker(); } );
</script>

<asp:UpdatePanel ... >
    ...
    <asp:TextBox runat="server" CssClass="datepicker" />
    <asp:Button runat="server" />
    ...
</asp:UpdatePanel>

当我第一次加载页面时，一切正常。单击文本框内部时，会弹出日期选择器。但是，当我单击按钮并执行异步回发时，当我再次单击该字段时，日期选择器不再弹出。

我知道问题是因为 UpdatePanel 在更新时完全替换了所有包含的 HTML，因此实际上，它是一个新的文本字段，尚未使用日期选择器功能进行初始化。

我想我不应该在这里使用 $(document).ready() 来初始化我的日期选择器，但是哪里是放置初始化代码的好地方？或者有没有办法可以在 AJAX 更新后重新触发初始化代码？

Answer 1

将类名'.datepicker'替换为页面内对象的名称。

例子：

<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>}

Answer 2

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

Answer 3

在后面添加脚本，这就是我所做的。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
        $(".datepicker").datepicker();
    });
</script>

Answer 4

将此脚本添加到页面末尾。

将initialize() 函数替换为您每次从updatepanel 进行部分回发时想要运行的任何代码。

<script type="text/javascript">
    function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            initialize();
        }
    }
</script>