1. 首页
  2. 问答
  3. 如果日期选择器在主页面内不起作用

如果日期选择器在主页面内不起作用

2016-06-09 52 views
0

有人可以帮助我。真的绝望让它工作。这里是我的完整主页代码：如果日期选择器在主页面内不起作用

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

我想让datepicker工作。我找到了一个好代码，并在页面瓦特/ OA母版页工作完全正常，更新面板，脚本管理等 头代码：

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

真的非常渴望做这项工作。帮我请

来源

2016-06-09 Paolo Duhaylungsod

+0

在第一个例子中，datepicker在一个'input'标签中，第二个例子中它在'TextBox'标签中。也许这是问题？ – pay

+0

@ user1438893嗨，会更新它。它在我的文本框中工作（没有主页） –

+0

失败案例中产生的输入元素是什么？客户端'id'是唯一的吗？当JavaScript代码运行时，jQuery选择器会发现什么？无论是否涉及主页，JavaScript都无需担心，但在呈现客户端时，只有一个DOM。 – David

回答

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

当ID 日期选择器服务器控件将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>

来源

2016-06-09 13:22:18 ulymor

+0

仍然无法正常工作。其工作正常与我的其他网页。 –

+0

不是workinnggg。不知道最新的问题 –

+0

你在浏览器控制台中看到任何javascript错误吗？它具有 – ulymor

0

尝试改变这一行

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

这个

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

注意所谓的 “日期选择器” 除了'多余的类形式控制”。这应该允许了jQuery找出表单元素，并应用一个datepicker它

来源

2016-06-09 13:55:40

+0

错误显示在图片先生。有一个错误控制台。任何想法如何解决它？ –

+0

您的样式表和js文件未加载。我建议你看看，除了改变我指出的路线！ –

+0

没有结果先生.. –

0

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

例如： 文本框用 “txtExpiry” ID，与 “内容” ID的占位符，成为： “content_txtExpiry”，当它呈现。

因此可能javascript和jquery代码找不到输入！ 和解决方案定义日期选择器不使用类或旧ID，使用最终呈现的名称为“content_txtExpiry”这样更改代码：

$（“[ID $ = content_txtExpiry]”）日期选择器（{showAnim：'slideDown'}）;

来源

2017-04-02 10:59:03

相关问题

 相关问题