在AJAX請求錯誤中顯示引導警報

我有一個簡單的AJAX請求，它根據表中的某些選擇更新一些PHP會話變量。如果AJAX請求發生錯誤，我會更改它們所選表格的顏色（如果它們選擇「是」，則通常會變爲綠色，如果選擇「否」，則會變爲紅色）。這一切都很好。在AJAX請求錯誤中顯示引導警報

我現在想在屏幕上顯示的可取消引導警報之一，也是一樣，在他們的例子：

<div class="alert alert-warning alert-dismissible" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
    </button> 
 
    <strong>Warning!</strong> Better check yourself, you're not looking too good. 
 
</div>

，但我不知道我怎麼會引起這會在AJAX請求發生錯誤時顯示。這裏是我的腳本：

$(document).ready(function() { 
 
    $('button.btn-success').click(function() { 
 
    var refreshItemID = $(this).closest('tr').attr('id'); 
 
    console.log(refreshItemID); 
 
    // Create a reference to $(this) here: 
 
    $this = $(this); 
 
    $.post('updateSelections.php', { 
 
     refreshItemID: refreshItemID, 
 
     selectionType: 'yes' 
 
    }, function(data) { 
 
     data = JSON.parse(data); 
 
     if (data.error) { 
 
     console.log(data); 
 
     console.log('something was wrong with the ajax request'); 
 
     $this.closest('tr').addClass("warning"); 
 
     return; // stop executing this function any further 
 
     } else { 
 
     console.log('update successful - success add class to table row'); 
 
     $this.closest('tr').addClass("success"); 
 
     $this.closest('tr').removeClass("danger"); 
 
     //$(this).closest('tr').attr('class','success'); 
 
     } 
 
    }).fail(function(xhr) { 
 
     console.log('ajax request failed'); 
 
     // no data available in this context 
 
     $this.closest('tr').addClass("warning"); 
 
    }); 
 
    }); 
 
});

你可以看到它增加了一個警告類的錶行，如果有一個錯誤：

$this.closest('tr').addClass("warning");

，但我不知道如何擴展這也添加了一個可以接受的警報（以及如何控制該警報的位置）？

來源

2016-10-14 user982124

使用這種自舉通知[點擊此處]（http://bootstrap-notify.remabledesigns.com/） –

例如將上述警報的html代碼添加到您的表格的上方，並將style="display:none"添加到警示div。還要設置一個id，如id="alert_ajax_error"到該div。

現在失敗的回調應該是這樣的：

.fail(function(xhr) { 
    console.log('ajax request failed'); 
    // no data available in this context 
    $this.closest('tr').addClass("warning"); 

    //make alert visible 
    $("#alert_ajax_error").show(); 
});

在成功躲警報的情況下，與$("#alert_ajax_error").hide();

來源

2016-10-14 11:08:33 zuluk

設置提醒DIV默認顯示：none和Ajax調用成功/文件中/錯誤，您可以使用下面的代碼顯示警報。

$(document).ready(function() { 
 

 

 
    $('button#alertshow').on('click', function() { 
 
    var msg_type = $("#msgtype").val(); 
 
    ShowAlert(msg_type, 'Message Content', msg_type); 
 
    }); 
 

 

 
    function ShowAlert(msg_title, msg_body, msg_type) { 
 
    var AlertMsg = $('div[role="alert"]'); 
 
    $(AlertMsg).find('strong').html(msg_title); 
 
    $(AlertMsg).find('p').html(msg_body); 
 
    $(AlertMsg).addClass('alert-' + msg_type); 
 
    $(AlertMsg).show(); 
 
    } 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="alertshow">Show alert</button> 
 
<select id="msgtype"> 
 
    <option value="warning">Warning</option> 
 
    <option value="info">Info</option> 
 
    <option value="success">Success</option> 
 
    <option value="danger">Danger</option> 
 
</select> 
 
<div class="alert alert-dismissible" role="alert" style="display:none;"> 
 
    <strong>Warning!</strong> 
 
    <p>Better check yourself, you're not looking too good.</p> 
 
</div>

來源

2016-10-14 12:56:51

在AJAX請求錯誤中顯示引導警報

回答

相關問題