Question

jquery datepicker不能通过主页面在usercontrol中工作....挣扎了很多.....

母版

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!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 runat="server">
    <title>Master Page</title>
    <link href="App_Themes/LMSTheme/Style.css" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="../App_Themes/LMSTheme/jquery-ui-1.8.16.custom.css" />

    <script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="../Scripts/jquery-ui-1.8.16.custom.min.js"></script>

    <script src="Scripts/ui.datepicker.js" type="text/javascript"></script>

    <style>.Hide{ display:none;}</style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="divcontent">
            <table width="100%">
                <tr height="400px" valign="top">
                    <td width="10px">
                    </td>
                    <td>
                        <asp:ContentPlaceHolder ID="WorkArea" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

这是我的用户控件：

 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="HRApproveSwipeLeave.ascx.cs"
    Inherits="HRApproveSwipeLeave" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<link type="text/css" rel="stylesheet" href="../App_Themes/LMSTheme/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../../Scripts/ui.datepicker.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#txtDate').datepicker({changeMonth: true,
            changeYear: true});
    });
</script>

<div class="demo">
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</div>

这是aspx，而我打电话给主页.....

 <%@ Page Language="C#" AutoEventWireup="true" Theme="LMSSkinFile" MasterPageFile="~/MasterPage.master" CodeFile="HRApprovSwipeLeave.aspx.cs" Inherits="HRApprovSwipeLeave" Title="ApproveSwipeLeave"%>
<%@ Register Src="UserControl/HRApproveSwipeLeave.ascx" TagName="HRApproveSwipeLeave" TagPrefix="LMS" %>
<asp:Content ID="LMS_HRApproveSwipeLeave" ContentPlaceHolderID="WorkArea" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
        <contenttemplate>
    <table>
        <tr>
            <td class="BoldCopy">
                <asp:Label ID="WelcomeUserName" runat="server" Visible="false"></asp:Label>                
            </td>
        </tr>       
    </table>
    <table> 
        <tr>
            <td>                
               <asp:Label ID="ApproveSwipeLeave" Font-Bold=true ForeColor=red runat="server"></asp:Label>      
            </td>
        </tr>  
        <tr>
            <td>                
                <LMS:HRApproveSwipeLeave ID="LMSHRApproveSwipeLeave" runat="server" />  
            </td>
        </tr>
           </table>
       </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

注意：jquery时间选择器当我通过用户控件运行时它根本不会触发..如果我创建一个示例aspx并且它正在工作....我没有在哪里更改代码masterpage或ascx或aspx ..供你参考我已发送三个。请帮助解决...我正在挖掘这个......

Answer 1

它不起作用的原因是因为你的控件生成的ID可能不是#txtDate。如果您希望保留它，请将其ClientIDMode属性设置为Static。否则，请使用其他jquery选择器。

Answer 2

下面的代码对我有用。

母版页

<head runat="server">
<%--JQUERY--%>

<link rel = "Stylesheet" href ="../jquery-ui-1.8.13.custom/development-bundle/demos/demos.css" />
<link rel = "Stylesheet" href ="../jquery-ui-1.8.13.custom/development-bundle/themes/base/jquery.ui.all.css" />

<script language="javascript" src="script.js"> </script>

<script src="../Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>

<%--JQUERY--%>

客户页面

<asp:Content ID="Content1" ContentPlaceHolderID="maincontent" Runat="Server">
    <script type ="text/javascript">
        $(function () {

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

        });

    </script> 

        <div id ="divname">

            <asp:TextBox ID = "txtDate" runat ="server"></asp:TextBox>

        </div> 
    </asp:Content>

Jquery日期时间选择器不使用母版页

2 个答案: