为什么我的jQuery UI datepicker在初始页面加载时工作正常时不能用于回发？

Question

我一直在尝试将jQuery UI Datepicker集成到我们的ASP.NET WebForms应用程序中.应用程序使用母版页为所有页面提供通用外观,所有内容页面都构建在UpdatePanel的ContentTemplate中.我创建了一个用户控件来包装datepicker的功能,并允许在运行时为代码隐藏中的每个日期设置minDate,maxDate,validators等.我还需要处理ASP.NET生成客户端元素ID的方式.

在过去的一周里,我一直在高低搜索,并找到了许多让它工作的技巧.这是我现在所处位置的简化版本.

<asp:TextBox ID="txtTB" runat="server"
    MaxLength="10"
    CssClass="dateBox" />

<script type="text/javascript">

    // This function enables the datepicker behavior for this textbox by its ClientID.
    function <%=txtTB.ClientID %>() {
        $("#<%=txtTB.ClientID %>").datepicker({
            changeMonth: true, changeYear: true,
            showOn: 'button',
            buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
            buttonImageOnly: true, buttonText: '', duration: '',
            onSelect: function() { }
        });
    };

    // Register the above function to execute on initial page load...
    $(document).ready(function(){ <%=txtTB.ClientID %>(); }) ;

    // ...and also after any update panel it's on has been refreshed. 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%=txtTB.ClientID %>);

</script>

我遗漏了验证器和其他一些我认为与问题无关的标记,但这是用户控件的核心 - 文本框和启用日期选择器功能的jQuery脚本.基本思想是利用ASP.NET的客户端ID:

1. 为此特定控件的JavaScript函数提供唯一的函数名称
2. 使用jQuery注册该函数以在初始页面加载后启用日期选择器
3. 使用ASP.NET的PageRequestManager注册相同的功能,以便在回发后保持启用日期选择器

第1项和第2项工作得很好.但是,在回发后,datepicker功能丢失了,我只剩下一个文本框.

可是等等!那不是全部.给定页面由多个面板组成,一次只能看到其中一个面板.仅通过将当前面板的Visible属性设为true来选择它们.所有其他面板的Visible属性都设置为false.

现在得到这个:第一个面板上的日期选择器,即初始页面加载时显示的日期选择器,按预期工作.第二个面板上的那些没有显示出来.回到第一页,datepickers再次出现.

有没有人有任何想法我错了？

Answer 1

虽然$(document).ready()是一次性初始化例程的理想选择,但如果你有代码需要在每次部分回发后重新运行,它会让你挂起.jQuery v1.3 +中添加的LiveQuery功能有助于此,但仅适用于一组有限的功能.

例如,如果我们想在上一个示例中向TextBox添加jQueryUI datepicker,该怎么办？在$(document).ready()中添加它会很有效,直到发生部分回发.然后,UpdatePanel的新TextBox元素将不再具有连接到它的datepicker.

<script type="text/javascript">
  function pageLoad() {
    $('#TextBox1').unbind();
    $('#TextBox1').datepicker(); 
  }
</script>

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server">
  <ContentTemplate>
    <asp:Button runat="server" ID="Button1" />
    <asp:TextBox runat="server" ID="TextBox1" />
  </ContentTemplate>
</asp:UpdatePanel>

以上答案取自以下链接.我已经在我的一个项目中测试并实现了它.

http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/