CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Benedict Lewis
Benedict Lewis

Reputation: 2813

Fade out multiple Bootstrap alerts

I came across a question asking how to fade out Bootstrap alerts after 5 seconds, and the answer was the following code. The issue is, it only works once, however as I have multiple alerts that are generated after an AJAX call this is no good. How do I make the following code run every time an alert is triggered?

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

Upvotes: 3

Views: 3405

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

One possible solution is to use a custom event showalert after the alert is shown and in the event handler remove the alert

$(document).on('showalert', '.alert', function(){
    window.setTimeout($.proxy(function() {
        $(this).fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, this), 5000);
})

and

$('<div class="alert alert-error">' + 'some message' + '</div>').appendTo('#result').trigger('showalert');

Demo: Fiddle

Upvotes: 6

zs2020
zs2020

Reputation: 54524

I think it is because $(this).remove(); removes the alert from the DOM. You can actually just modify the content without regenerating the alert every time after the AJAX call.

Upvotes: 0

Related Questions