tags:

views:

397

answers:

3
+1  Q: 

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"&gt;
<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"&gt;

<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>
+3  A: 

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.

Chris Brandsma  2009-05-08 21:50:37
I've fixed the formatting so the examples are visible.
Sam Hasler  2009-05-08 21:51:34
Thanks Chris, that worked. Also thanks for fixing the formatting on my question.:)Louis
 2009-05-08 22:03:05
it's worth noting that .NET 4 finally introduces a baked-in option to disable the ClientID generation--and with earlier versions you could disable it by inheriting from `ContentPlaceHolder` and `Content` and returning String.Empty for calls to retrieve the ClientID (and one other ID which escapes me)
STW  2010-08-17 20:45:19
+3  A: 

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 %>")
meep  2009-05-08 21:51:09
Meep, thanks for answering. It works like a charm now.
 2009-05-08 22:03:43
A: 

hi
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

hamed  2010-08-17 20:31:23
This might be acceptible *if* you're already using ASP.NET AJAX extensions--but it is a very poor solution if you aren't using UpdatePanels or other such controls. In testing, a bare-nekkid `ScriptManager` generates ~20k of extra Javascript to push to the client (and to be clear, this ScriptManager doesn't even references a script--it's 20KB of 100% unused waste)
STW  2010-08-17 20:43:50

related questions

Is it better to create Model classes, or just stick with generic database utility class?
What are effective options for embedding video in an ASP.NET web site?
Visual Studio 2008 debugger already attached work-around
Tracking state using ASP.NET AJAX / ICallbackEventHandler
ASP.NET Display SVN Revision Number
ASP.NET URL Rewriting
How can I change the background of a masterpage from the code behind of a content page?
Easy way to AJAX WebControls
How do I define custom web.config sections with potential child elements and attributes for the properties?
ASP.NET MVC "CRUD" Database Sample
Are Multiple DataContext classes ever appropriate?
How to RedirectToAction in ASP.NET MVC without losing request data
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP.NET built in user profile, Vs old stile user class/tables
What's a good book for learning ASP?
Bandwith throttling in IIS 6 by IP Address
ASP .Net Custom Client-Side Validation
How to get the value of built, encoded ViewState?
Decent, simple, GIS/mapping component for ASP.NET?
Checklist for IIS 6/ASP.NET Windows Authentication?
How to write to Web.Config in Medium Trust ?
ASP.NET, Visual Studio and Subversion - how to integrate?
Floating Point Number parsing: Is there a Catch All algorithm?
How do I sync the SVN revision number with my ASP.NET web site?
ASP.NET Site Maps