[英]Pop up success and fade out on AJAX success
I want, on success, show an initially hidden alert, and then, fade it out after an amount of seconds. 我希望,在成功时,显示一个最初隐藏的警报,然后在几秒钟之后将其淡出。
I don't know why I am not getting this right, which seems pretty simple. 我不知道为什么我没有做到这一点,这似乎很简单。
This is my approach, my PHP: 这是我的方法,我的PHP:
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success!</strong>
</div>
And my JavaScript (the AJAX part): 我的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');
});
});
}
});
The result is that the alert is not initially hidden, since it is hidden when success. 结果是警报最初不会被隐藏,因为它在成功时被隐藏。
I have also tried with the hide
class and remove the $("#success-alert").hide();
我也尝试过hide
类并删除$("#success-alert").hide();
part. 部分。
I am starting to think this is impossible to achieve, to do this on AJAX success, and I have come up with this other (but worse, because it is not on success) solution. 我开始认为这是不可能实现的,在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');
});
});
});
The result is that it works only the first click, the second click don the button doesn't work, only if I refresh the page. 结果是它只工作第一次点击,第二次点击该按钮不起作用,只有当我刷新页面时。
The other solution I have tried, is to divide the code into: 我尝试过的另一个解决方案是将代码分成:
$(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');
});
});
The result is that I that the alert appears for an instant and disappears instantly. 结果是我警报瞬间出现并立即消失。
How can I solve this, apparently easy problem¿? 我该如何解决这个问题呢? Thank you very much. 非常感谢你。
HTML HTML
<div class="alert alert-success" id="success-alert" style="display:none"> Success Message</div>
Success Callback 成功回调
$("#success-alert").show();
setTimeout(function() { $("#success-alert").hide(); }, 5000);
Before your ajax request make sure to hide your alert using a css class or jQuery 在您的ajax请求之前,请确保使用css类或jQuery隐藏警报
$('#sucess-alert').hide();
In order to solve your problem I've been using setTimeout for the delay and jQuery's fadeToggle to hide the element after some time has passed. 为了解决你的问题,我一直在使用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.