[英]Pop up success and fade out on AJAX success
我希望,在成功时,显示一个最初隐藏的警报,然后在几秒钟之后将其淡出。
我不知道为什么我没有做到这一点,这似乎很简单。
这是我的方法,我的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');
});
});
结果是我警报瞬间出现并立即消失。
我该如何解决这个问题呢? 非常感谢你。
HTML
<div class="alert alert-success" id="success-alert" style="display:none"> Success Message</div>
成功回调
$("#success-alert").show();
setTimeout(function() { $("#success-alert").hide(); }, 5000);
在您的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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.