与 UpdatePanel 内 TabContainer 内的 ASP.NET 控件相关联的 JQuery 控件不起作用答案

【问题标题】：JQuery controls associated to ASP.NET controls inside a TabContainer inside an UpdatePanel does not work与 UpdatePanel 内 TabContainer 内的 ASP.NET 控件相关联的 JQuery 控件不起作用
【发布时间】：2011-04-25 14:04:00
【问题描述】：

我的页面上有一个 UpdatePanel 控件，其中包含一些需要与 JQuery 控件关联的 ASP.NET 控件（DatePicker、TimePicker ...）：

<script language="javascript" type="text/javascript">

function $(LoadDateAndTimePickers() {

    $("#" + '<%=fromDateTextBox.ClientID%>').datepicker();
    $("#" + '<%=toDateTextBox.ClientID%>').datepicker();
    $("#" + '<%=fromTimeTextBox.ClientID%>').timepicker({ showPeriod: true });
    $("#" + '<%=toTimeTextBox.ClientID%>').timepicker({ showPeriod: true }));

};

</script>

这在 IE 上运行良好。但是，这在 Chrome 和 FireFox 上不起作用，因为我的 ASP.NET 控件位于 UpdatePanel 内。

所以，我已经处理了UpdatePanel 中的Sys.WebForms.PageRequestManager endRequest 事件，以便能够使其在上述浏览器上运行。

 <asp:UpdatePanel ID="updatePanel" runat="server">
    <ContentTemplate>
        <script  type="text/javascript" language="javascript">
            Sys.WebForms.PageRequestManager.getInstance().
                add_endRequest(LoadDateAndTimePickers)
        </script>

    .....

</asp:UpdatePanel>

效果很好。但是，在其他页面上，我将我的 ASP.NET 控件放置在 UpdatePanel 内的 *AJAX ToolKit * TabContainer 控件中。即使我将处理脚本放在TabContainer 控件中，这里endRequest 处理也会停止工作。

感谢您的帮助..

【问题讨论】：

我已编辑问题以包含将 JQuery 控件与 ASP.NET 控件相关联的脚本。

标签： jquery asp.net

【解决方案1】：

也许我还不明白你的问题，但是当我在 jquery 支持的所有浏览器中尝试它时，这很有效：

这是我的内容头：

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <link href="ui/development-bundle/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet"
        type="text/css" />
    <script src="ui/development-bundle/ui/jquery-ui-1.8.12.custom.js" type="text/javascript"></script>
    <script src="ui/development-bundle/ui/jquery.effects.core.js" type="text/javascript"></script>
    <script src="ui/development-bundle/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="ui/development-bundle/ui/jquery.ui.datepicker.js" type="text/javascript"></script>

</asp:Content>

这是在页面上：

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


<asp:UpdatePanel ID="pnlAjax" runat="server" ClientIDMode="Static">
    <ContentTemplate>
        <asp:TextBox runat="server" ID='txtMyFirstField'></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>


<script type="text/javascript">
    $(function () {
        $("#pnlAjax input").datepicker();
    });
</script>

【讨论】：

【解决方案2】：

我建议将javascript放在更新面板之外。更新面板的呈现并不能确保面板内部的javascript会运行，这就是为什么您注册endRequest，以重新在更新面板更新他自己后运行 javascript 初始化。

【讨论】：