Как исчезнуть метка внутри панели обновления с помощью jQuery в Asp.Net?

Question

У меня есть этот ярлык, который я хочу исчезнуть после нажатия кнопки.Я использую MasterPage.А диспетчер скриптов объявлен на MasterPage.В Defaulst.aspx у меня есть:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">
    <script type="text/javascript" src="scripts/jquery-1.4.1.min.js">
        $(function () {
            $("input[id$='btnShowDate']").click(function () {
                $("span[id$='lblStatus']").fadeOut("slow");
            });
        });
    </script>
    <asp:UpdatePanel runat="server" ID="uP">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnShowDate" />
        </Triggers>
        <ContentTemplate>
            <asp:Label runat="server" ID="lblStatus" />
            <div>
                <asp:Button runat="server" ID="btnShowDate" Text="Show Today`s Date" OnClick="btnShowDate_Click" /></div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

А на CodeBehind у меня есть:

protected void btnShowDate_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
lblStatus.Text = DateTime.Now.Date;
}

Проблема в том, что после нажатия кнопки метка не исчезаетУ кого-нибудь есть идеи о том, как справиться с этой проблемой?Спасибо.

Answer 1

Идентификатор не тот, который, как вы думаете, находится на отображаемой странице, ASP.Net немного его меняет, например:

<span id="container_container2_lblStatus">Stuff</span>

Так что вам нужен атрибут-заканчивается-сселектор , например:

$(document).ready(function() {
  $("span[id$='lblStatus']").fadeOut("slow");
});

Чтобы это произошло при нажатии, добавьте его как обработчик .click(), например так:

$(function() {
  $("input[id$='btnShowDate']").live('click', function() {
    $("span[id$='lblStatus']").fadeOut("slow");
  });
});

Более чистой альтернативой является добавление класса к каждому элементу управления, например:

<asp:Label runat="server" id="lblStatus" CssClass="status" />
//and...
<asp:Button runat="server" id="btnShowDate" CssClass="showDate" ... />

Использование этих классов в качестве селектора, например:

$(function() {
  $(".showDate").live('click', function() {
    $(".status").fadeOut("slow");
  });
});

Поскольку кнопка получает замену на панели обновлений, вам нужно .live() здесь, чтобы она работала и после обратной передачи.

Answer 2

Хорошо, я понял, как обращаться с jQuery в панели обновления. вот код:

<script type="text/javascript" src="scripts/jquery-1.4.1.min.js">
    </script>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            $(document).ready(function () {
                $("span[id$='lblStatus']").delay(3000).fadeOut(4000, function () {
                    $(this).innerHTML("");
                });
            });
        });

</script>

Может быть, другие, у кого есть проблемы, могли бы использовать это и справиться с этим. Спасибо

Answer 3

На самом деле человек это решил мою проблему !!! я использовал это:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
    $(document).ready(function () {
        $("div[id$='MainMessagesPanel']").delay(2000).fadeOut(1500);
    });
});