弹出成功，退出AJAX成功

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:

这是我的方法，我的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):

我的JavaScript (AJAX部分):

$.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.

我还尝试过隐藏类并删除$(“#success-alert”).hide();部分。

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.

我开始认为这是不可能实现的，要在AJAX上实现这一点，我已经提出了另一个解决方案(但更糟糕的是，因为它不成功)。

$(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.

结果是，它只在第一次点击时起作用，第二次点击don按钮不起作用，只有当我刷新页面时。

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.

我怎么才能解决这个问题呢?非常感谢。

2 个解决方案

#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);

#2

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

在ajax请求之前，请确保使用css类或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.

为了解决您的问题，我一直在为延迟使用setTimeout和jQuery的fadeToggle在一段时间后隐藏元素。

$.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);
    }
});

#1