locked
JQuery Datepicker not working in Contentpage ASP.Net RRS feed

  • Question

  • User1046245955 posted

    Datapicker is working fine without Master Page but when i use Master page and content page, it is not working in Content Page. I am using the following code for Datapicker in Master page and Content page.

    master page:

    <!-- css -->
    <script src="newdesign/css/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="newdesign/css/jquery-ui.css" />
    <script src="newdesign/css/jquery-ui.js"></script>

    datepicker page.aspx

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <script language="javascript">

    $(function () {
    $("#<%=txtStartDate.ClientID%>").datepicker({
    dateFormat: 'dd-M-yy',
    //minDate: 0,
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    });
    });

    </script>

    <asp:TextBox ID="txtStartDate" autocomplete="off" runat="server" CssClass="form-control" Width="10%" onkeypress="return false;" onpaste="return false;"></asp:TextBox>

    </asp:Content>

    Wednesday, April 22, 2020 9:42 PM

Answers

  • User-1330468790 posted

    Hi paminchever,

     

    I am afraid that I can not reproduce the problem according to the codes you provided.

    Could you please check if the resouce file locations are correct?

    For example, verify if the URL for "jquery-ui.js" is correct or not. I think .js file might be not in a folder named "css". 

     

    I created a master page with three resource files (all from CDN and the links are working)

    1. jquery-1.12.4.js
    2. jquery-ui.min.css(version: 1.12.1)
    3. jquery-ui.min.js (version: 1.12.1)

    and child page with a TextBox control and the exactly same javascript function.

    Everything seems working perfectly from my side.

    Master Page:

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </body>

    Child Page:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script language="javascript">
    
            $(function () {
                $("#<%=txtStartDate.ClientID%>").datepicker({
                    dateFormat: 'dd-M-yy',
                    //minDate: 0,
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1,
                });
            });
    
        </script>
        <asp:TextBox ID="txtStartDate" autocomplete="off" runat="server" CssClass="form-control" Width="10%" onkeypress="return false;" onpaste="return false;"></asp:TextBox>
    </asp:Content>

    Running the Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 23, 2020 3:03 AM

All replies

  • User475983607 posted

    Open the browser's dev tools and look for errors in the console view.   

    Wednesday, April 22, 2020 10:13 PM
  • User-1330468790 posted

    Hi paminchever,

     

    I am afraid that I can not reproduce the problem according to the codes you provided.

    Could you please check if the resouce file locations are correct?

    For example, verify if the URL for "jquery-ui.js" is correct or not. I think .js file might be not in a folder named "css". 

     

    I created a master page with three resource files (all from CDN and the links are working)

    1. jquery-1.12.4.js
    2. jquery-ui.min.css(version: 1.12.1)
    3. jquery-ui.min.js (version: 1.12.1)

    and child page with a TextBox control and the exactly same javascript function.

    Everything seems working perfectly from my side.

    Master Page:

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </body>

    Child Page:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script language="javascript">
    
            $(function () {
                $("#<%=txtStartDate.ClientID%>").datepicker({
                    dateFormat: 'dd-M-yy',
                    //minDate: 0,
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1,
                });
            });
    
        </script>
        <asp:TextBox ID="txtStartDate" autocomplete="off" runat="server" CssClass="form-control" Width="10%" onkeypress="return false;" onpaste="return false;"></asp:TextBox>
    </asp:Content>

    Running the Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 23, 2020 3:03 AM
  • User1046245955 posted

    i tried to copy all your code and still not working... when I check the errors in developer tools no error found. 

    Tuesday, April 28, 2020 8:54 AM
  • User-1330468790 posted

    Hi paminchever,

     

    That's so weird. The only thing I could suggest is to target what the error is firstly.

    1. Could you please share me the version of the ASP.NET framework and other environment information? I would try to reproduce the problem under the same circumstance
    2. Try add below JS code in the previous callback JS function to check whether the Jquery selector works as expected.
    $(function () {
                console.log($("#<%=txtStartDate.ClientID%>"));
                $("#<%=txtStartDate.ClientID%>").datepicker({
                    dateFormat: 'dd-M-yy',
                    //minDate: 0,
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1
                });
            });

    If it is working, then you will get below result in dev-tool of the browser.

    n.fn.init(1)
    0: input#ContentPlaceHolder1_txtStartDate.form-control.hasDatepicker
    context: document
    length: 1
    selector: "#ContentPlaceHolder1_txtStartDate"
    __proto__: Object(0)

    If not, the result will be as below (result array contains nothing):

    n.fn.init
    context: document
    selector: "#ContentPlaceHolder1_txtStartDate"
    __proto__: Object(0)

     

    Best regards,

    Sean

    Tuesday, April 28, 2020 10:39 AM