突破成功並淡出AJAX成功

Question

我希望，在成功時，顯示一個最初隱藏的警報，然后在幾秒鍾之后將其淡出。

我不知道為什么我沒有做到這一點，這似乎很簡單。

這是我的方法，我的PHP：

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

我的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');
                });   
            });

            }
        });

結果是警報最初不會被隱藏，因為它在成功時被隱藏。

我也嘗試過hide類並刪除$("#success-alert").hide(); 部分。

我開始認為這是不可能實現的，在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');
                });   
            });
 });

結果是它只工作第一次點擊，第二次點擊該按鈕不起作用，只有當我刷新頁面時。

我嘗試過的另一個解決方案是將代碼分成：

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

結果是我警報瞬間出現並立即消失。

我該如何解決這個問題呢？ 非常感謝你。

Answer 1

HTML

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

成功回調

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

Answer 2

在您的ajax請求之前，請確保使用css類或jQuery隱藏警報

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

為了解決你的問題，我一直在使用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);
    }
});