asp.net bootstrap alert auto close

Question

I have this panel on my .aspx webform page to display messages (success, failed, exception etc.) after button postback events . I also included some Jquery library on this page as well.

 <asp:Panel ID="InfoPanel" runat="server" class="alert alert-success alert-dismissable" Visible="False">
     <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
     <i class="fa-lg fa fa-bullhorn"></i>
     <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
 </asp:Panel>

It will look like this: (lblMessage will display the text at code-behind)

How do I make it to be auto-close after 5s, I have zero knowledge about JS and jQuery but if you show me how it work I can apply it to my program (lol) Note: I see this question right here: Bootstrap Alert Auto Close the selected answer was:

    $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

But I am confused, how do I make it work?

Answer 1

$("#success-alert") is a selector... You're choosing what part of the page the following actions will be taken against. In this case, it looks for an element with the id of success-alert.

The Id of asp controls in the page is auto-generated but can be accessed via the controls .ClientId property.

So, you need to execute that javascript but replace success-alert with the client id of the InfoPanel control

By default, Javascript executes as soon as it's loaded by the page (there are ways to delay it). In your case, the easiest way to do this would be to include a <script> block in the response containing the message.

For your reference, the fadeTo documentation is worth a read. The parameters being passed in are the delay (2000 milliseconds in your example) and the opacity (should be 0-1). After it's faded out, it then slides up over the course of 500ms (think of a closing concertina).

The function() {} at the end is an anonymous function that's called after the animations complete. Much like a lambda. You can optionally use this to do any other tidy up you need but it shouldn't be required.

It's been quite a while since I did webforms but I think you want something like this at the end of your info box

<script type="text/javascript">
    $("#<%=InfoPanel.ClientID%>").delay(5000).fadeTo(500, 0);
</script>

Eg wait 5 seconds then fade out over 1/2 second

Answer 2

I found this one and it works: http://www.queryadmin.com/997/automatically-close-twitter-bootstrap-alert-message/

Automatically close (fade away) the alert message after 5 seconds:

<script type="text/javascript">

$(document).ready(function () {

    window.setTimeout(function () {
        $(".alert").fadeTo(1500, 0).slideUp(500, function () {
            $(this).remove();
        });
    }, 5000);
     
});

</script>

The content below the message will slide-up to its original position.

This is the HTML code used to display the message:

<div class="alert alert-danger">
    This is an example message...
</div>

More information: window.setTimeout(function, delay)

The result will look as follows:

Answer 3

You can set a timer and fade it out after 5 secs.

Something like

setTimeout(function () {
     $("#success-alert").fadeOut(100, null);                            
}, 5000);