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

Question

Hi guys, 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="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>

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.

Answer 1

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.

Answer 2

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