为什么我的 jQuery UI 日期选择器在初始页面加载时工作正常，但不能用于回发？

Question

我一直在尝试将 jQuery UI Datepicker 集成到我们的 ASP.NET WebForms 应用程序中。该应用程序使用母版页为所有页面提供共同的外观，并且所有内容页面都构建在 UpdatePanel 的 ContentTemplate 内。我创建了一个用户控件来包装日期选择器的功能，并允许在运行时为代码隐藏中的每个日期设置 minDate、maxDate、验证器等。我还需要处理 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 注册该函数以在初始页面后启用日期选择器 load
3. 向 ASP.NET 的 PageRequestManager 注册相同的函数，以在回发后保持启用日期选择器

项目 1 和 2 工作得很好。但是，回发后，日期选择器功能丢失，只剩下一个文本框。

但是等等！这还不是全部。给定页面由多个面板组成，一次只能看到其中一个面板。仅通过使当前面板的 Visible 属性为 true 来选择它们。所有其他面板的 Visible 属性均设置为 false。

现在得到这个：第一个面板上的日期选择器（在初始页面加载时显示的日期选择器）按预期工作。第二个面板上的那些就不会出现。返回第一页，日期选择器再次出现。

有人知道我哪里出错了吗？

Answer 1

虽然 $(document).ready() 非常适合一次性初始化例程，但如果您的代码需要在每次部分回发后重新运行，它会让您陷入困境。
jQuery v1.3+ 中添加的 LiveQuery 功能对此有所帮助，但仅适用于有限的功能集。

例如，如果我们想将 jQueryUI 日期选择器添加到前面示例中的 TextBox，该怎么办？将其添加到 $(document).ready() 中会很好用，直到发生部分回发。然后，UpdatePanel 的新 TextBox 元素将不再连接日期选择器。

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

Answer 2

我认为更简洁的方法是使用 ClientScriptManager.RegisterStartupScript。

Javascript：

function initCalendar(controlId) {
    $("#" + controlId).blahblah(....
}

在你的代码后面（OnPreRender 也许）：

Page.ClientScript.RegisterStartupScript(this.GetType(), "SomeName", string.Format("<script>initCalendar('{0}');</script>", txtBox.ClientID));

Answer 3

抱歉回复晚了。

为什么不尝试这个：

<script type="text/javascript">
function <%=txtTB.ClientID %>() {
    $("#<%=txtTB.ClientID %>").datepicker({
        changeMonth: true, changeYear: true,
        showOn: 'button',
        buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
        buttonImageOnly: true, buttonText: '', duration: '',
        onSelect: function() { }
    });
};
$(document).ready(function(){ 
<%=txtTB.ClientID %>();
}) ;
</script>

然后使用以下触发器将文本框放入更新面板中：

<asp:UpdatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTB" runat="server" MaxLength="10" CssClass="dateBox" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="txtTB" />
</Triggers>
</asp:UpdatePanel>

Answer 4

嗯，

这是这个问题的解决方案。下面的链接解释了为什么日期选择器在ajax回发后不起作用以及使其在ajax中工作的解决方案。

http://jquerybyexample.blogspot.com/2010 /08/jquery-datepicker-does-not-work-after.html

Answer 5

当您将控件的 Visible 属性设置为 false 时，它根本不会呈现。

这意味着当页面首次加载时，不可见面板内的 JavaScript不存在。

要解决此问题，您可以使用 CSS (display: none) 而不是 Visible 属性来隐藏面板。

Answer 6

在更新面板中尝试此操作

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function() {
            var customer = document.getElementById("<%=cmbCustomers.ClientID%>").value;

            /* Jquery Functions Here*/
            $(document).ready(function() {
               ...
            });


        });
        </script>

Answer 7

只需在 Page_Load 代码后面使用下面的代码..

string DOB = Request.Form[TextBoxDOB.UniqueID];

TextBoxDOB.Text = DOB;

我实现了这个并且工作起来就像一个魅力

Answer 8

如果您使用更新面板，请不要惊慌 单击此处 放松一下。
详细解答

Answer 9

该解决方案对我有帮助。日期选择器值必须位于 pageLoad() 函数中，以便日期选择器在回发时显示。
这是我的工作代码

<script>
    var dateToday = new Date();
    var yrRange = "2000:" + (dateToday.getFullYear()); // the range is from 2003 :2016 etc etc

    //If this datepicker is not in page load , the datepicker will not show after a post back
    function pageLoad() {

        $("#<%= txtDateFrom.ClientID %>").datepicker({ showButtonPanel: true   //Use this to show the today,done and previous and next buttons on the calender
            , changeMonth: true,     //Use this to let the user select the month easily on the calender instead of using next and previous buttons
        changeYear: true
         , yearRange: yrRange
        /***********************************
         u8se these to show the max and min dates yoiu want tio show the user
         //,minDate: "-12Y"
        // , maxDate: "+1M +10D" 
        ******************************/

        // , numberOfMonths: 2                - Use this code to show more than 1 month on the calender

        /*********************
        Use the following code to show the Calender as a Icon next to the textbox.
         showOn: "button",
        buttonImage: "images/calendar.gif",
         buttonImageOnly: true,
        buttonText: "Select date"
        ******************************/                
        });

        $("#<%= txtDateTo.ClientID %>").datepicker({
            showButtonPanel: true   //Use this to show the today,done and previous and next buttons on the calender
            , changeMonth: true,     //Use this to let the user select the month easily on the calender instead of using next and previous buttons
            changeYear: true
             , yearRange: yrRange
            // minDate: -20
            // , maxDate: "+1M +10D" - u8se these to show the max and min dates yoiu want tio show the user
            //In our case
            //, maxDate: "+1Y"
            // , numberOfMonths: 2                - Use this code to show more than 1 month on the calender

            /*********************
           Use the following code to show the Calender as a Icon next to the textbox.
             ,showOn: "button",
             buttonImage: "images/icons/calendarIcon.png" ,
             buttonImageOnly: true,
            buttonText: "Select date"
           ******************************/
        });            
    }       
</script>