JQuery не отображается правильно на странице ASPX - PullRequest
2 голосов
/ 02 июня 2011

Я пытаюсь заставить эту функцию работать на странице aspx, но у меня тухлое время. В принципе, это нормально работает на обычной HTML-странице, но на странице aspx, когда вы нажимаете на кнопку, все, что вы видите, это полоска верхней части, а иногда (каждый 5-й + один щелчок и каждый двойной щелчок) сообщение отображается и исчезает как и должно быть. Что мне не хватает? Может ли это быть связано в обратной передаче?

ТРЕНИРОВКА ЗДЕСЬ

Использование кода на странице aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="checkTest.aspx.cs" Inherits="WebApplication2.checkTest" %>

<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Button1").click(function () {
                    $(".message").stop(true,true).slideToggle().fadeOut(6000);
                });
            });
        </script>
    <style type="text/css">
    .message{height:70px;display:none;}
        .noChangesMessage{width:84px;padding:8px 8px;  background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;text-align:center;}
        .tipEnd{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #535353;margin:0 auto;}

    </style>
</head>
<body>
    <form id="form1" runat="server">



    <br /><br /><br />
    <div>
    <div style="width:100px">
    <div style="height:70px">            
                <div style="margin-bottom:5px;" class="message">
                    <div class="noChangesMessage">No changes were made!</div>
                    <div class="tipEnd"></div>
                </div></div>
            <div style="">
                <asp:Button ID="Button1" runat="server" Text="Save Changes"  />
            </div>
            </div> 

    </div>


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

мой код через источник просмотра для amit_g

<!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><title>
</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#Button1").click(function () {
                    $(".message").stop(true,true).slideToggle().fadeOut(6000);
                });
            });
        </script>
    <style type="text/css">.
    .message{height:70px;display:none;}
        .noChangesMessage{width:84px;padding:8px 8px;  background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;text-align:center;}
        .tipEnd{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #535353;margin:0 auto;}
    </style>
</head>
<body>
    <form method="post" action="checkTest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRkU+SP3bu4QJNH9S9XtdwPbEE8YODY/YlkotOt6l692s8=" />
</div>
<div class="aspNetHidden">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKroLr3AwKM54rGBtLTfCTwYmYnb6l8tnp5jtojhvORYMJ6bPzAI+qbaDlU" />
</div>
    <br /><br /><br />
    <div>
    <div style="width:100px">
    <div style="height:70px">            
                <div style="margin-bottom:5px;" class="message">
                    <div class="noChangesMessage">No changes were made!</div>
                    <div class="tipEnd"></div>
                </div></div>
            <div style="">
                <input type="submit" name="Button1" value="Save Changes" id="Button1" class="Button1" /></div>
            </div>   
    </div>
    </form>
</body>
</html>

Ответы [ 5 ]

1 голос
/ 02 июня 2011

это связано с тем, что asp.net динамически называет элементы html. Один из способов получить значение Id - использовать clientId, например Button1.clinetId

 $("#<%=Button1.ClientID %>").click(function () {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

это так просто

1 голос
/ 02 июня 2011

Попробуйте это:

$("#<%= Button1.ClientID %>").click(function () {    
   $(".message").stop(true,true).slideToggle().fadeOut(6000);}
);
0 голосов
/ 02 июня 2011

Я не знаю, используете ли вы главные страницы / страницы с контентом, но если это так, то, как я обнаружил, работает то, что вы присваиваете вашим страницам основные / материалы ID.

Если вы просто используете один из них и предполагаете, что на главной странице указан идентификатор "Mstr", а на странице содержимого - идентификатор "Cont", вы можете создать префиксы JavaScript, например, так:

var masterPrefix = "Mstr_",
    contentPrefix = "Cont_";

Затем вы можете создать функцию с именем $getElement(), которая позволит вам передавать идентификатор, который вы даете в разметке, следующим образом:

function $getElement(id) {
    return $("#" + masterPrefix + contentPrefix + id);
}

Затем, учитывая ваш конкретный пример, вы можете получить объект jQuery в свой div runat = "server", выполнив следующее:

var $button = $getElement("Button1");

$button.click(function() {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

Я обнаружил, что этот метод спасает жизнь, когда вы входите в большие проекты, в которых используются тяжелые сценарии на стороне клиента.

В качестве альтернативы, если вам не нравится вызывать другую функцию для возврата вашего объекта, вы всегда можете сделать это:

var $button = $('input[id$="Button1"]');

$button.click(function() {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});

Здесь вы просто говорите, дайте мне div с идентификатором, оканчивающимся на "Button1".

0 голосов
/ 02 июня 2011

Я вижу ответы, в которых они изменили идентификатор на класс, чтобы правильно выбрать кнопку.

Лично я не люблю менять код для решения подобных проблем, поскольку идентификатортребуемый элементом управления ASP.NET, мы могли бы также нацелить его.

Наилучший способ выбора элементов управления .NET, так как их идентификаторы предваряются во время выполнения, - это использовать 'end in'селектор.

$("[id$='Button1']").click(function () {
    $(".message").stop(true,true).slideToggle().fadeOut(6000);
});
0 голосов
/ 02 июня 2011

Нажатие кнопки вызывает обратную передачу, которая вызывает перезагрузку страницы.Ваша анимация отменяется до того, как у нее появится шанс на воспроизведение (за исключением случайных задержек).

ASP.NET Webforms присоединяет обработчик событий к событию нажатия кнопки, которое запускает JavaScript, который динамически генерируется для вашей страницы.Это основной механизм для интерактивных страниц в веб-формах.

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