如何使用甜蜜警报来确认删除.js的图像?

Question

我想在删除图像之前使用甜蜜的警报确认。但是，它不起作用。如果我使用 javascript 默认确认，它可以工作。我尝试使用异步和等待，但没有帮助。如何修复/调试此问题？

var pathURL = "file_path/";
var dropifyElements = {};
$('.dropify').each(function() {
dropifyElements[this.id] = true;
});
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
id = event.target.id;
if(dropifyElements[id]) {
var x = false;
return swal({   
title: "Are you sure?",   
text: "You will not be able undo this operation!",   
type: "warning",   
showCancelButton: true,   
confirmButtonColor: "#DD6B55",   
confirmButtonText: "Yes, delete it!",   
cancelButtonText: "No, cancel please!",   
closeOnConfirm: false,   
closeOnCancel: false 
}, function(isConfirm){   
if (isConfirm) {
x = true;
} else {     
swal({
title:"Cancelled",
text:"Delete Cancelled :)",
type:"error",
timer: 2000,
});
x = true;
} 
});
return x;
//return confirm("Do you really want to delete this image?");
// return confirm("Do you really want to delete "" + element.file.name + "" ?");
}
});

Answer 1

好的，所以input元素通过事件处理程序传递，所以如果用户真的想删除它，你所要做的就是默认在处理程序上返回 false，然后如果用户在 swal 实例上单击确认，您只需删除输入元素的值。我没有你的代码，但这应该有效。

var pathURL = "file_path/";
var dropifyElements = {};
$('.dropify').each(function() {
dropifyElements[this.id] = true;
});
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
id = event.target.id;
if(dropifyElements[id]) {
swal({   
title: "Are you sure?",   
text: "You will not be able undo this operation!",   
type: "warning",   
showCancelButton: true,   
confirmButtonColor: "#DD6B55",   
confirmButtonText: "Yes, delete it!",   
cancelButtonText: "No, cancel please!",   
closeOnConfirm: false,   
closeOnCancel: false 
}, isConfirm => {   
if (isConfirm) {
element.value = "";
} else {     
swal({
title:"Cancelled",
text:"Delete Cancelled :)",
type:"error",
timer: 2000,
});
} 
});
return false;
}
});

Answer 2

我读了答案，对我不起作用，但我写了一个不同的想法

var dropifyElements = {};
$('.dropify').each(function () {
dropifyElements[this.id] = false;
});
dropElements.on('dropify.beforeClear', function (event, element) {
id = event.target.id;
if (!dropifyElements[id]) {
swal({
title: "¿Estás seguro?",
text: "¿Realmente deseas eliminar el archivo "" + element.file.name + "" ?",
icon: "warning",
buttons: {
cancel: "Cancelar",
acept: "Aceptar"
},
dangerMode: true
}).then((action) => {
if (action == "acept") {
dropifyElements[id] = true;
element.clearElement();
}
});
return false;
}
else
{
dropifyElements[id] = false;
return true;
}
});

Answer 3

此代码还将解决单击甜蜜警报弹出窗口的取消按钮的问题

var drEvent = $('.dropify').dropify();
var hideConfirmBox = false;
drEvent.on('dropify.beforeClear', function(event, element){
if (hideConfirmBox == false) {
swal({
title: 'Do you want to remove?',
text: 'This will remove the selected image.',
buttons: {
cancel: true,
confirm: {
text: 'Yes, remove it!',
value: 'proceed'
}
},
dangerMode: true
}).then((value) => {
if (value == 'proceed') {
$("body").trigger("click")
hideConfirmBox = true;
$(this).next('button.dropify-clear').trigger('click');
}
});
}

return hideConfirmBox;
});
drEvent.on('dropify.afterClear', function(event, element){
hideConfirmBox = false;
// call ur ajax here for deleting on clicking yes in sweet alert pop-up
});

Answer 4

也许，这会起作用！

dropifyUpload.on('dropify.beforeClear', function (event, element) {
swal({
title: "¿Esta seguro que desea eliminarlo?",
text: "¡Una vez confirmado no habrá vuelta atrás!",
icon: 'warning',
buttons: {
cancel: 'Cancelar',
delete: 'OK'
}
}).then(function (result) {
if (result == "delete") {
element.input.trigger($.Event("dropify.afterClear"), [element]);
}
})
return false;
});