How to fadeOut a label inside a update panel with jQuery in Asp.Net?

I have this label that i want to fadeOut after button event clicked. I am using a MasterPage. And the Script Manager is declared on MasterPage. In Defaulst.aspx i have:

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxC开发者_运维百科ontrolToolkit" 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>

And on the CodeBehind i have:

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

The problem is that the label is not fading Out after the button clicked. Does someone has any idea on how to handle this problem? Thank you.

The ID isn't what you think it is in the rendered page, ASP.Net mangles it a bit, like this:

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

So you need an attribute-ends-with selector, like this:

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

The to make it happen on click, add it as a .click() handler, like this:

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

A cleaner alternative is to add a class to each control, for example:

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

The use those classes as your selector, for example:

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

Since the button's getting replace in an update panel, you want .live() here, so it works after postback as well.

Ok i figured out how to handle jQuery in update panel. here is the code:

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

Maybe others who have issues could use it and handle it. Thank you

Really man this solved my problem !!! i used this :

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