Bootstrap Alert只显示一次
Bootstrap Alert showing only once
我有以下问题:我使用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 success
/error
回调中将元素的不透明度设置为1
:
$('#rateSuccess').css('opacity', 1).slideDown();
.fadeTo()
设置元素的不透明度,而.slideUp()
将CSS设置为display:none;
JSFiddle
相关文章:
- Javascript返回值只在循环中返回一次
- Jquery FadeIn FadeOut 只工作一次
- Javascript html每点击一次就会更改url
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- Rails操作只调用一次,但我在ajax中每秒钟都调用一次
- jQuery滚动功能只工作一次
- 刷新导致我的帖子“;张贴“;再一次
- 引导程序崩溃一次只能看到一个
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 加载器组件仅加载一次
- 根据Angular.JS上一次的内容禁用选择
- 一次又一次地在新的和相同的选项卡中打开一个url
- 只在宽度以下和宽度以上各准备一次
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- Angularjs:空对象,当只有一次点击时
- 在Angular应用程序中每个帖子投票一次
- 主干模型更改事件只触发一次
- 使用每500ms运行一次的jquery函数是个好主意吗
- Bootstrap Alert只显示一次
- Javascript: alert显示不止一次