CODEWITHSUNDEEP
asp.netjquery
user103854
user103854

Reputation: 21

Can't get JQuery to work in Master Page

I have a sample jquery in a form with no master page, and it works fine. I am trying to use the same function inside my master page but it does not work, I am using ASP.NET. Here is my code for both:

WebForm (This works):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Surfitlocal.WebForm3" %>
<!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></title>
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pHeader').click(function() {
                $('#pBody').slideToggle('slow');
            });
        });
    </script>
    <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            width:450px;
            height:18px;
            padding: 4px;           
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;               
            width:450px;
            padding: 4px;
            padding-top: 7px;
        }      
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
            <asp:Label ID="lblText" runat="server" />
        </asp:Panel>

        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur
        </asp:Panel>
    </div>
    </form>
</body>
</html>

MasterPage (This does NOT work):

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

<!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></title>
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pHeader').click(function() {
                $('#pBody').slideToggle('slow');
            });
        });
    </script>     
    <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            width:450px;
            height:18px;
            padding: 4px;           
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;               
            width:450px;
            padding: 4px;
            padding-top: 7px;
        }      
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
            <asp:Label ID="lblText" runat="server" />
        </asp:Panel>

        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur
        </asp:Panel>    

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


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

Upvotes: 2

Views: 2514

Answers (4)

Den Ash
Den Ash

Reputation: 1

Just try to put below these. It might help in Master page

$(document.getElementById("<%=pHeader.ClientID%>")

$(document.getElementById("<%=pBody.ClientID%>")

Upvotes: 0

hamed
hamed

Reputation: 1

For solve this problem in asp.net you can use script manager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
     <Scripts>
     //put your js file in script reference tag: 
     //<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" />
     //<asp:ScriptReference Path="~/scripts/PWDMenuMaker.js" />
    </Scripts>
</asp:ScriptManager>

//Movafagh bashid

Upvotes: -1

Chris Brandsma
Chris Brandsma

Reputation: 11736

The problem is that when you add the MasterPage you get ClientID mangling.

$("#pBody")  =>   $(".pBody")

You can't use ID with the MasterPage, you wont have access to the mangled clientID. You need to have a custom css class on the element.

Of course, now you are expecting that every page that uses that MasterPage have a pBody. Better to keep that code in the page, not the master page.

Upvotes: 4

janhartmann
janhartmann

Reputation: 15003

I can see you are using CssClass but in your function you use "#" indicating its an ID.

Therefore

$('#pBody')

Should be

$(".pBody')

If you still want to use IDs, you should be using:

$("#<%= pBody.ClientID %>")

Upvotes: 3

Related Questions