Pop up success and fade out on AJAX success

Question

I want, on success, show an initially hidden alert, and then, fade it out after an amount of seconds.

I don't know why I am not getting this right, which seems pretty simple.

This is my approach, my PHP:

<div class="alert alert-success" id="success-alert">
      <button type="button" class="close" data-dismiss="alert">x</button>
       <strong>Success!</strong>
 </div>

And my JavaScript (the AJAX part):

$.ajax({
            type: 'POST',

            url: 'note.php',
            data: { note: note, request_id: request_id, cve: cve, note_id: note_id, status: status,
                    },

            success: function(msg){  
               $("#success-alert").hide();
                $(".add-note").click(function showAlert() {
                $("#success-alert").alert();
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
               $("#success-alert").alert('close');
                });   
            });

            }
        });

The result is that the alert is not initially hidden, since it is hidden when success.

I have also tried with the hide class and remove the $("#success-alert").hide(); part.

I am starting to think this is impossible to achieve, to do this on AJAX success, and I have come up with this other (but worse, because it is not on success) solution.

$(document).ready (function(){
            $("#success-alert").hide();
            $(".add-note").click(function showAlert() {
                $("#success-alert").alert();
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
               $("#success-alert").alert('close');
                });   
            });
 });

The result is that it works only the first click, the second click don the button doesn't work, only if I refresh the page.

The other solution I have tried, is to divide the code into:

$(document).ready (function(){
            $("#success-alert").hide();

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

The result is that I that the alert appears for an instant and disappears instantly.

How can I solve this, apparently easy problem¿? Thank you very much.

Answer 1

HTML

<div class="alert alert-success" id="success-alert" style="display:none"> Success Message</div>

Success Callback

$("#success-alert").show();
setTimeout(function() { $("#success-alert").hide(); }, 5000);

Answer 2

Before your ajax request make sure to hide your alert using a css class or jQuery

$('#sucess-alert').hide();

In order to solve your problem I've been using setTimeout for the delay and jQuery's fadeToggle to hide the element after some time has passed.

$.ajax({
    type: 'POST',
    url: 'note.php',
    data: {
        note: note,
        request_id: request_id,
        cve: cve,
        note_id: note_id,
        status: status
    },
    success: function(data){
        var fadeDuration = 500;
        var fadeDelay = 2000;

        var successAlert = $('#sucess-alert');

        successAlert.show();
        setTimeout(function() {
            successAlert.fadeToggle(fadeDuration);
        }, fadeDelay);
    }
});