farrukh farrukh - 16 days ago 13
ASP.NET (C#) Question

jquery function not work in content master page

I want to call the jquery in content master page but it does not work while in the content master page whereas it works on its own.

The code in Master page is

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="datetimepicker.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>

<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />

</div>
</form>
</body>
</html>


The code in Content page

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<img src="Styles/sms1.png" alt="not" />
<script type="text/javascript">
$(document).ready(function () {
$("<%=TextBox1.ClientID %>").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
</asp:Content>

Answer

When you look at the piece of code below in your master page, Your script is being inserted into the ContentPlaceHolder1 but the jquery is being loaded after the script. Thats why its not working since the script should be injected after the jquery loaded.

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>

You can change your Master page and Content page as below to make sure, the script is injected after the jquery script.

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="datetimepicker.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>

<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="script" runat="server">
    </asp:ContentPlaceHolder>

    </div>
    </form>
</body>
</html>

Content Page

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <img src="Styles/sms1.png" alt="not" /> 
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">  
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>
</asp:Content>

If you look at the above code, another ContentPlaceHolder for the script is created in the master page after the jquery and other scripts and the content page script is moved into this new place holder.