asp.net UpdatePanel中的jquery ui datepicker

Question

我有一个网页，其中我在一个位于UpdatePanel中的asp.net文本框上使用了一个jQuery UI日期选择器。下面是对我所做的粗略的描述

<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在更新时完全替换了所有包含的超文本标记语言，所以实际上，它是一个新的文本字段，尚未使用日期选择器功能进行初始化。

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

Answer 1

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

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

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

将initialize()函数替换为您希望在每次从updatepanel执行部分回发时运行的任何代码。

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

Answer 3

将类名称'.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>}