如何使用甜蜜警報來確認 dropify.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; });