当我的jQuery UI datepicker在初始页面加载中正常运行时，为什么我的jQuery UI datepicker不起作用? [英] Why doesn't my jQuery UI datepicker work for postbacks when it works fine on initial page loads?

问题描述

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

I've been trying to integrate the jQuery UI Datepicker into our ASP.NET WebForms application. The application uses master pages to provide a common look to all pages, and all of the content pages are built inside the ContentTemplate of an UpdatePanel. I've created a user control to wrap the datepicker's functionality and allow setting of the minDate, maxDate, validators, etc. for each date from the codebehind at runtime. I also need to deal with the way ASP.NET generates client element IDs.

在过去的一周中，我进行了高低搜索，并找到了许多使其工作的提示.这是我现在所在位置的简化版本.

Over the last week, I've searched high and low, and found lots of tips for getting it to work. Here is a somewhat simplified version of where I'm at right now.

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

我省去了我认为与该问题无关的验证器和其他一些标记，但这是用户控件的作用–一个文本框和启用datepicker功能的jQuery脚本.基本思想是利用ASP.NET的客户端ID来:

I've left out the validators and some other markup that I don't think is related to the issue, but that's the meat of the user control--a textbox, and the jQuery script that enables the datepicker functionality. The basic idea is to leverage ASP.NET's client IDs to:

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

1. Provide a unique function name for the JavaScript function for this specific control
2. Register that function with jQuery to enable the datepicker after the initial page load
3. Register that same function with ASP.NET's PageRequestManager to keep the datepickers enabled after postbacks

项目1和2运作良好.但是，回发后，datepicker功能丢失了，我只剩下一个文本框.

Items 1 and 2 are working great. However, after a postback, the datepicker functionality is lost and I'm left with just a textbox.

但是等等！那不是全部.给定的页面包含多个面板，一次只能看到其中一个面板.通过仅使当前面板的Visible属性为true来选择这些选项.其他所有面板的Visible属性均设置为false.

But wait! That's not all. A given page consists of multiple panels, only one of which is visible at a time. These are selected by only having the Visible property true for the current panel. The Visible property for all of other panels are set to false.

现在，请按以下步骤操作:第一个面板上的日期选择器(在初始页面加载时显示的日期选择器)可以正常工作.第二个面板上的那些不会显示.返回首页，日期选择器再次出现.

Now get this: The datepickers on the first panel, the one displayed upon initial page load, work as expected. Those on the second panel just don't show up. Going back to the first page, the datepickers show up again.

有人对我要去哪里有什么想法吗?

Does anyone have any ideas where I'm going wrong?

推荐答案

虽然$(document).ready()非常适合一次性初始化例程，但是如果您有需要重新运行的代码，它会让您绞尽脑汁每次部分回发后. jQuery v1.3 +中添加的LiveQuery功能可以帮助解决此问题，但仅适用于有限的功能集.

While $(document).ready() is ideal for one-time initialization routines, it leaves you hanging if you have code that needs to be re-run after every partial postback. The LiveQuery functionality added in jQuery v1.3+ helps with this, but only works for a limited set of functionality.

例如，如果我们想在上一个示例中向文本框添加jQueryUI datepicker，该怎么办?将其添加到$(document).ready()会很好用，直到会发生部分回发.然后，UpdatePanel的新TextBox元素将不再连接日期选择器.

For example, what if we wanted to add a jQueryUI datepicker to the TextBox in the previous example? Adding it in $(document).ready() would work great, until a partial postback occurred. Then, the UpdatePanel’s new TextBox element would no longer have the datepicker wired up to it.

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

以上答案来自以下链接.我已经在我的一个项目中对此进行了测试和实施.

This above Answer is taken from the below link. I have tested and implemented this in one of my project.

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

这篇关于当我的jQuery UI datepicker在初始页面加载中正常运行时，为什么我的jQuery UI datepicker不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！