How to create a fading label in JQuery / ASP.NET after a button press.

Question

I think that this should be pretty easy but I'm not quite sure how to wire things up.

I have a page on which the user can define a query. When done, the user enters a name for the query and presses a button. I'd like to process the button click, make a text label (or Span) visible for a few seconds and then have it fade out.

Since it is a postback, I can turn an ASP:Label control to visible - that's easy. Now how do I get jquery to make the label fade away after a few seconds? In a broader sense, how do you get a postback to trigger a jquery method?

Bonus for the simplest solution!

Answer 1

Here's a low-tech technique that keeps all the script in your page template: add a $(document).ready() function to the page that executes conditionally based on a page-level variable, like this ...

// In your button's click handler, set this.UserHasClicked to true
var userHasClicked = '<%= this.UserHasClicked %>' == 'True';
$(document).ready(function() {
    if(userHasClicked) {
        $(labelSelector).delay(2000).fadeOut(1000);
    }
});

Answer 2

Call ClientScriptManager.RegisterClientScriptBlock

Answer 3

Something like this...

var buttonFade = function() {
  $('#my .label .selector').fadeOut(2000);
}
setTimeout(buttonFade, 2000);

If you post some of your markup, I could also take a stab at putting the setTimeout() into a funtion triggered when the label appears.

Answer 4

Start the asp label text as empty.

<asp:Label id="myLabel" runat="server"></asp:Label>

Then you can fade out the label every page load and set the text of the asp label after hitting the button.

Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn.Click
  myLabel.Text = "You hit the button"
End Sub

    $(document).ready(function() {
        $('#mylabel').fadeOut(3000, function() {
            $(this).innerHTML(""); //reset the label after fadeout
        });
    });