由于页面重新加载,Sweetalert 出现后突然关闭
Sweetalert closes suddenly after appearing because of page reload
我正在使用 javascript sweetalert 对话框。由于页面重新加载,对话框在出现后关闭。我已应用建议的修复程序来回答
我的模板代码是
<button title="Transform" id="transform_btn" type="button" class="btn" style="color:white;background-color:#fff;">
<a href="/load_to_hive/{{stu.cases_id}}/">
<i class="glyphicon glyphicon-hourglass fa-2x"></i>
</a>
</button>
而 javascript 显示对话框的代码是
{% block javascript %}
<script src="{% static 'js/sweetalert.min.js' %}"></script>
<script>
var transformBtn= document.getElementById('transform_btn');
transformBtn.addEventListener("click",function(){
swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
});
})
</script>
{% endblock javascript %}
编辑
我正在尝试延迟显示警报,即页面已重新加载但无法正常工作。我不知道为什么:
<script>
var transformBtn= document.getElementById('transform_btn');
transformBtn.addEventListener("click",function(){
setTimeout(function(){
swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
})
},3000);
})
</script>
您的按钮内有一个 link。这里的问题很可能是您的页面在您单击按钮后立即导航到新页面。
附带说明一下,我想不出在任何情况下您都应该在这样的按钮内放置锚标记。要么只有一个锚标记,然后将其设置为看起来像一个按钮,要么只有一个按钮。但绝对不是两者。
有几种方法可以解决此问题,最好的方法取决于您希望发生什么。但是如果你想在点击按钮后导航到一个新页面,我只会让你的甜蜜警报的确认按钮弹出 link。像这样:
swal({
title: "Good job!",
text: "You clicked the button!",
confirmButtonText: '<a href="/load_to_hive/{{stu.cases_id}}/">',
icon: "success",
});
其他方法是等待用户点击成功并使用 javascript 导航。这实际上取决于您希望按钮执行的操作。
我正在使用 javascript sweetalert 对话框。由于页面重新加载,对话框在出现后关闭。我已应用建议的修复程序来回答
我的模板代码是
<button title="Transform" id="transform_btn" type="button" class="btn" style="color:white;background-color:#fff;">
<a href="/load_to_hive/{{stu.cases_id}}/">
<i class="glyphicon glyphicon-hourglass fa-2x"></i>
</a>
</button>
而 javascript 显示对话框的代码是
{% block javascript %}
<script src="{% static 'js/sweetalert.min.js' %}"></script>
<script>
var transformBtn= document.getElementById('transform_btn');
transformBtn.addEventListener("click",function(){
swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
});
})
</script>
{% endblock javascript %}
编辑 我正在尝试延迟显示警报,即页面已重新加载但无法正常工作。我不知道为什么:
<script>
var transformBtn= document.getElementById('transform_btn');
transformBtn.addEventListener("click",function(){
setTimeout(function(){
swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
})
},3000);
})
</script>
您的按钮内有一个 link。这里的问题很可能是您的页面在您单击按钮后立即导航到新页面。
附带说明一下,我想不出在任何情况下您都应该在这样的按钮内放置锚标记。要么只有一个锚标记,然后将其设置为看起来像一个按钮,要么只有一个按钮。但绝对不是两者。
有几种方法可以解决此问题,最好的方法取决于您希望发生什么。但是如果你想在点击按钮后导航到一个新页面,我只会让你的甜蜜警报的确认按钮弹出 link。像这样:
swal({
title: "Good job!",
text: "You clicked the button!",
confirmButtonText: '<a href="/load_to_hive/{{stu.cases_id}}/">',
icon: "success",
});
其他方法是等待用户点击成功并使用 javascript 导航。这实际上取决于您希望按钮执行的操作。