JQuery datepicker is not working with masterpage in asp.net

Question

This is my Masterpage source code

    <%@ Page Title="" Language="C#" MasterPageFile="~/Usermaster.Master" AutoEventWireup="true"
    CodeBehind="ApproveLoanpage.aspx.cs" Inherits="WebLoanCalculator.ApproveLoanpage" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">

code to bind by textbox ID

$(function () {
            $("#<%= txtCashAmt.ClientID %>").datepicker({
            changeMonth: true,
            changeYear: true
        });
    });

And Code to by by textbox class.

$(function () {
                $(".date").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
</script>

<table style="width: 100%">
        <tr>
            <td>
                <asp:TextBox ID="txtCashAmt" runat="server" CssClass="date"></asp:TextBox>
<asp:TextBox ID="txtCashAmt2" runat="server" CssClass="date"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</asp:Content>

Explanation here i have multiple textbox and i don't want to bind them by ID. I want to use of class to bind with JQuery datepicker by the textbox class like i have assigned date class to each and every textbox.

the above code is working in normal .aspx page but when i am using this code in masterpage then it is not working. this is my problem.please help me to bind jquery datepicker with textbox by class in asp.net master page

After edit

I am getting error as below.

TypeError: $(...).datepicker is not a function

in browser console.

Answer 1

Its working fine, try the following code & check your internet connection because your reference to jquery is online otherwise download jquery files and use in project.

        <%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="site" %>

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title>DateTime Picker</title>

            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
            <asp:ContentPlaceHolder ID="head" runat="server">
            </asp:ContentPlaceHolder>
        </head>
        <body>
            <form id="form1" runat="server">
                <div>
                    On Master Page
                     <asp:TextBox ID="txtCashAmt3" runat="server" CssClass="date"></asp:TextBox>
                        <asp:TextBox ID="txtCashAmt4" runat="server" CssClass="date"></asp:TextBox>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </form>
        </body>
        </html>

    <%@ Page Title="" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <script>
            $(function () {
                $(".date").datepicker({
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

        <table style="width: 100%">
            <tr>
                <td>
                    On Sub Page
                    <asp:TextBox ID="txtCashAmt" runat="server" CssClass="date"></asp:TextBox>
                    <asp:TextBox ID="txtCashAmt2" runat="server" CssClass="date"></asp:TextBox>
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </asp:Content>

JQuery datepicker is not working with masterpage in asp.net

Question

1 answers

solution1
5 ACCPTED 2013-12-30 09:24:05

JQuery datepicker is not working with masterpage in asp.net

Question

1 answers

solution1 5 ACCPTED 2013-12-30 09:24:05

solution1
5 ACCPTED 2013-12-30 09:24:05