javascript 页面不等待来自 SweetAlert 确认窗口的响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27987071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Page is not waiting for response from SweetAlert confirmation window
提问by dmeehan
I am trying to upgrade my JavaScript confirm()action to use SweetAlert. Currently my code is something like this:
我正在尝试升级我的 JavaScriptconfirm()操作以使用SweetAlert。目前我的代码是这样的：
<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>
This waits for the user to confirm before navigating to the delete page. I would like to use this example from SweetAlert to ask the user to confirm before deleting:
这将在导航到删除页面之前等待用户确认。我想使用 SweetAlert 中的这个示例在删除之前要求用户确认：
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
}
else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Everything I have tried has failed. When the first alert is displayed, the page has gone ahead and deleted the item and refreshed before the user has even clicked on the alert buttons. How do I make the page wait for the users input?
我尝试过的一切都失败了。当第一个警报显示时，页面已经继续删除该项目并在用户甚至在用户单击警报按钮之前刷新。如何让页面等待用户输入？
Any help would be greatly appreciated.
任何帮助将不胜感激。
采纳答案by meagar
You cannot use this as a drop-in replacement for confirm. confirmblocks the single thread of execution until the dialog has been acknowledged, you cannotproduce the same behavior with a JavaScript/DOM-based dialog.
您不能将其用作confirm. confirm阻止单线程执行直到对话框被确认，你不能用基于 JavaScript/DOM 的对话框产生相同的行为。
You need to issue a request to /delete.php?id=100in the successcallback for your alert box.
您需要/delete.php?id=100在警报框的成功回调中发出请求。
Instead of...
代替...
swal("Deleted!", "Your imaginary file has been deleted.", "success");
You need
你需要
<a href="#">Delete<a>
...
$.post('/delete.php?id=100').then(function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
You also mustfix your delete.phpto only accept POSTrequests. It's a huge problem to allow GETrequests to delete resources. The first time Google or any other crawler finds your page, it will look at the hrefof every link in your document and follow each link, deleting all of your content. They will not be stopped by the confirmbox, as they probably (with the exception of Google) won't be evaluating any JavaScript.
您还必须修复您delete.php的仅接受POST请求。允许GET请求删除资源是一个很大的问题。Google 或任何其他抓取工具第一次找到您的页面时，它会查看href您文档中的每个链接并跟踪每个链接，删除您的所有内容。它们不会被confirm框阻止，因为它们可能（Google 除外）不会评估任何 JavaScript。
回答by Abdelhakim AKODADI
You can do it this way.
你可以这样做。
HTML:
HTML：
<a href="/delete.php?id=100" class="confirmation" >Delete</a>
JS:
JS：
$('.confirmation').click(function (e) {
var href = $(this).attr('href');
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
window.location.href = href;
}
});
return false;
});
Seems a hack but it's working for me.
似乎是一个黑客，但它对我有用。
回答by ryanm
Here's an example in an Angular directive (since SweetAlert is offered through an angular directive wrapper). This is one 'elegant' method for doing this in JavaScript. On a click event, there is an e.stopImmediatePropagation(), then if the user confirms, it evaluates the "ng-click" function. (Note scope.$eval is not a JavaScript eval()).
这是 Angular 指令中的一个示例（因为 SweetAlert 是通过 angular 指令包装器提供的）。这是在 JavaScript 中执行此操作的一种“优雅”方法。在点击事件上，有一个 e.stopImmediatePropagation()，然后如果用户确认，它会评估“ng-click”函数。（注意 scope.$eval 不是 JavaScript eval()）。
Markup:
<i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>
标记：
<i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>
Simple "confirm click" directive:
简单的“确认点击”指令：
/**
* Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
*/
angular.module('myApp.directives').directive('confirmClick', [
'SweetAlert',
function (SweetAlert) {
return {
priority: -1,
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var message = attrs.confirmClick || 'Are you sure you want to continue?';
SweetAlert.swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true
}, function (isConfirm) {
if (isConfirm) {
if(attrs.ngClick) {
scope.$eval(attrs.ngClick);
}
} else {
// Cancelled
}
});
});
}
}
}
]);
回答by prapto
$('.delete').click(function () {
var id = this.id;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this post!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
alert(id);
});
});
<a id="<?php echo $row->id_portfolio ?>" class=" delete">
