gpt4 book ai didi

javascript - 在 AJAX 请求错误时显示 Bootstrap 警报

转载 作者:行者123 更新时间:2023-11-30 15:46:12 27 4
gpt4 key购买 nike

我有一个简单的 AJAX 请求,它根据表中的某些选择更新一些 PHP session 变量。如果 AJAX 请求有错误,我会更改他们选择的表格行的颜色(如果他们选择"is",它通常会变为绿色;如果他们选择“否”,它通常会变为红色)。这一切都运作良好。

我现在也想在屏幕上显示一个可关闭的 Bootstrap 警报,就像在他们的示例中一样:

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

但我不确定如何扩展它以添加可关闭的警报(以及如何控制该警报的位置)?

最佳答案

设置警报 div 默认显示:无和内部 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).removeAttr('class');
$(AlertMsg).addClass('alert 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>

关于javascript - 在 AJAX 请求错误时显示 Bootstrap 警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40041347/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com