如果日期选择器位于母版页内，则日期选择器不起作用答案

【问题标题】：datepicker not working if it is inside a master page如果日期选择器位于母版页内，则日期选择器不起作用
【发布时间】：2016-06-09 13:05:36
【问题描述】：

谁能帮帮我。真的很想让它发挥作用。这是我的完整母版页代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>IslandGas</title>
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/font-awesome.min.css" rel="stylesheet" />
    <script src ="/js/bootstrap.js" type = "text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server" class="form-horizontal">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="AdminUpdatePanel" runat="server">

    <ContentTemplate>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a id="home" href="~/Admin/dash.aspx" runat="server" class="navbar-brand">Island Gas Admin</a>
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse" id="navbar-main" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="products" href="#"><i class="fa fa-fw fa-wrench"></i>Products <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A1" href="ViewProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Products</a></li>
                            <li><a id="A2" href="AddNewProduct.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add a Product</a></li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="suppliers" href="#"><i class="fa fa-fw fa-wrench"></i>Category <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A29" href="ViewCategory.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Product Categories</a></li>
                            <li><a id="A6" href="AddCategory.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add Product Category</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="orders" href="#"><i class="fa fa-fw fa-table"></i>Customer Orders <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A10" href="CustomerOrder.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Orders</a></li>

                        </ul>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="reports" href="#"><i class="fa fa-fw fa-table"></i>Income Reports <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A17" href="IncomeReports.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Report</a></li>
                            <li><a id="A3" href="ReportCustomerTrack.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Customer Track Report</a></li>
                            <li><a id="A7" href="ReportProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Products Report</a></li>

                            <li><a id="A9" href="ReportRegisteredCustomers.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Registered Customer</a></li>
                            <li><a id="A4" href="ReportsGR.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Return Goods Requests</a></li>
                        </ul>
                    </li><li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="A5" href="#"><i class="fa fa-fw fa-table"></i>Audit Trail <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A8" href="AuditTrail.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Audit Trail</a></li>

                        </ul>
                    </li>

                </ul>
                <ul class="nav navbar-nav pull-right">
                    <li id="user" runat="server" class="dropdown" visible="true">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <asp:Literal ID="ltUser" runat="server" Text="Administrator" /> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">

                            <li class="divider"></li>
                            <asp:linkbutton ID="linkLogout" runat="server" onclick="link_Logout_Click" CausesValidation="False" >[Log Out]</asp:linkbutton>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="clearfix">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-12">
                        <h1><asp:ContentPlaceHolder ID="title" runat="server" /></h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <asp:ContentPlaceHolder ID="content" runat="server" />
            </div>
        </div>
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Made by <a href="#">Duhaylungsod, Paolo</a></p>
                </div>
            </div>
        </footer>
    </div>
    <script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
    <script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>
    </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

我正在尝试使日期选择器工作。我找到了一个很好的代码，它在没有母版页、更新面板、脚本管理器等的页面中运行良好。头部代码：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

内容：

  $(document).ready(function () {

      $('[id$=txtExpiry]').datepicker({ showAnim: 'slideDown' });

  });

文本框：

<div class ="form-group">
        <label class ="control-label col-lg-4"> Expiry Date</label> 
        <div class = "col-lg-8">  
        <asp:TextBox ID="txtExpiry" runat="server" class="form-control"></asp:TextBox>
</div>

真的很想完成这项工作。请帮帮我

【问题讨论】：

在第一个示例中，日期选择器位于input 标记内，而在第二个示例中，它位于TextBox 标记内。也许这就是问题所在？
@user1438893 嗨，会更新它。它在我的文本框中工作（没有母版页）
在失败的情况下生成的input 元素是什么？客户端id 是唯一的吗？当 JavaScript 代码运行时，jQuery 选择器会找到什么？是否涉及母版页与 JavaScript 无关，当它呈现客户端时，只有一个 DOM。
当我点击文本框时，工作日期选择器会显示一个日历。在这里，它没有任何动作。不显示日历。但没有错误。好像它没有阅读脚本@David
@PaoloDuhaylungsod：这是您熟悉一些调试工具的好机会。由于 JavaScript 运行客户端，您应该做的第一件事实际上是查看客户端代码。 asp:TextBox 在这种情况下没有任何意义，您需要检查生成的 input。此外，您可以在浏览器中调试客户端代码，并更具体地查看失败的位置/方式。 “就好像不读脚本一样”并不是真正的调试，只是随机猜测。

标签： c# asp.net datepicker textbox

【解决方案1】：

 <asp:TextBox ID="datepicker" runat="server" class="form-control">

当 ID 为 datepicker 的服务器控件将在 html 中呈现时，结果 html 元素将自动生成 id，其中包含基于母版页中父服务器控件的前缀，即
id="ctl100_main_datepicker"

$( "#datepicker" ).datepicker();

jquery 选择器搜索 ID 等于“datepicker”的 html 元素。您可以使用元素 css 类作为选择器：

  <script>
  $(function() {
    $( ".datepicker" ).datepicker();
  });
  </script>

<asp:TextBox ID="datepicker" runat="server" class="datepicker form-control"></asp:TextBox>

【讨论】：

仍然无法正常工作。它在我的其他网页上运行良好。
您在浏览器控制台中看到任何 javascript 错误吗？
控制台出现错误$(...).datepicker is not a function。这意味着调用datepicker插件初始化时，第二个js脚本还没有完全加载。
试试<script type="text/javascript" language="javascript"> $(document).ready(function(){ $("#datepicker").datepicker(); }); </script> 而不是<script type="text/javascript" language="javascript" > $(function () { $("#datepicker").datepicker(); }); </script>
还是没有效果，先生

【解决方案2】：

尝试更改此行

<asp:TextBox ID="datepicker" runat="server" class="form-control"></asp:TextBox>

到这里

<asp:TextBox ID="datepicker" runat="server" class="datepicker, form-control"></asp:TextBox>

注意除了“form-control”之外还有一个名为“Datepicker”的额外类。这应该允许 jquery 找到表单元素并将日期选择器应用于它

【讨论】：

错误显示在图片中先生。有一个错误控制台。知道如何解决吗？
您的样式表和 js 文件未加载。我建议你除了改变我指出的那条线之外再看看！

【解决方案3】：

试试这个：

如果你不想使用 css 选择器并继续按 id 选择，试试这个：

$('#<%= datepicker.ClientID %>').datepicker();

这样您将获得由 ASP.NET 生成的 id。

MasterPage 为控件提供另一个 ID。请参阅此参考http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs

【讨论】：

【解决方案4】：

当您使用母版页时，为了避免页面中的 id 相同，asp.net 本身会更改文本框 id，实际上它会将占位符的名称添加到您的控件的 id 中。

例如：带有“txtExpiry” id 的文本框，在带有“content” id 的占位符中，在呈现时变为：“content_txtExpiry”。

所以可能 javascripts 和 jquery 代码找不到输入！并且解决方案是不使用类或旧 id 定义日期选择器，使用最终呈现的名称作为“content_txtExpiry”，因此将代码更改为：

$('[id$=content_txtExpiry]').datepicker({ showAnim: 'slideDown' });

【讨论】：