我遇到以下问题:我使用 Bootstrap 创建了一些警报。最初,这些是隐藏的。当给出评级(使用 raty)时,将发送 Ajax 请求。成功返回时,将显示警报并启动计时器。当计时器用完时,警报消失。我 100% 确定我的 Ajax 请求是成功的。
这有两个问题。
- 首先,当警报消失时,它会在页面上留下一个空白区域,它原来所在的位置。
- 其次,当给出另一个评级时,会再次触发 Ajax 请求,但不再显示警报。
我该如何解决这些问题?
这是我的代码:
HTML:
<div id='rateSuccess' class='alert alert-success alert-dismissable fade in' role='alert' hidden>
<button class='close' type='button' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong>Success!</strong> Your rating is saved!
</div>
<div id='rateError' class='alert alert-danger alert-dismissable fade in' role='alert' hidden>
<button class='close' type='button' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<strong>Error!</strong> You must be logged in to give a rating!
</div>
JavaScript:
$(document).ready( function() {
$('#rating').raty({
path: '../images',
click: function(score, evnt) {
$.ajax({
type: 'POST',
url: '/publication/rate/' + pubID,
data: {'score': score},
success: function(data, status, jqXHR) {
var success = data.success;
if (success) {
$('#rateSuccess').toggle();
startTimeout('#rateSuccess');
} else {
var type = data.type;
if (type === 'server') {
$('#serverAlert').toggle();
startTimeout('#serverAlert');
} else if (type === 'loggedin') {
$('#rateError').toggle();
startTimeout('#rateError');
}
}
}
});
}
);
function startTimeout(id) {
window.setTimeout(function() {
$(id).fadeTo(500, 0).slideUp(500, function(){
$(id).toggle();
});
}, 5000);
}
});
JSFiddle:http://jsfiddle.net/yqb1y6k1/
最佳答案
从超时中删除 $(id).toggle();
(因为警报已被 .slideUp()
隐藏),并设置元素的不透明度到 AJAX 中的 1
success
/error
回调:
$('#rateSuccess').css('opacity', 1).slideDown();
.fadeTo()
设置元素的不透明度,而 .slideUp()
将 CSS 设置为 display:none;
关于javascript - Bootstrap Alert 只显示一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29192882/