Не удается заставить JQuery работать на главной странице - PullRequest
Новая
       8

Не удается заставить JQuery работать на главной странице

2 голосов
/ 09 мая 2009

У меня есть образец JQuery в форме без главной страницы, и она отлично работает. Я пытаюсь использовать ту же функцию внутри моей главной страницы, но она не работает, я использую ASP.NET. Вот мой код для обоих:

WebForm (это работает): 

<%@ 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 (это НЕ работает): 

<%@ 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>

Ответы [ 4 ]

4 голосов
/ 09 мая 2009

Проблема в том, что при добавлении MasterPage вы получаете искаженный идентификатор клиента. 

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

Вы не можете использовать ID с MasterPage, у вас не будет доступа к искаженному clientID. У вас должен быть собственный класс css для элемента.

Конечно, теперь вы ожидаете, что на каждой странице, которая использует эту MasterPage, есть pBody. Лучше сохранить этот код на странице, а не на главной странице.

3 голосов
/ 09 мая 2009

Я вижу, что вы используете CssClass, но в своей функции вы используете "#", обозначающий его идентификатор.

Поэтому 

$('#pBody')

Должно быть 

$(".pBody')

Если вы все еще хотите использовать идентификаторы, вы должны использовать: 

$("#<%= pBody.ClientID %>")
0 голосов
/ 01 мая 2013

Просто попробуйте поставить их ниже. Это может помочь в главной странице 

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

$(document.getElementById("<%=pBody.ClientID%>")
0 голосов
/ 18 августа 2010

Для решения этой проблемы в asp.net вы можете использовать менеджер скриптов: 

<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>

// Мовафаг Башид

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...