SweetAlert2 ASP.NET Gridview Delete Row Confirm-CodePudding

I try to use sweetalert2 when deleting gridview a row.

This my js:

<script>
        var object = { status: false, ele: null };
        function ConfirmDelete(ev) {
            if (object.status) { return true; };
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
                preConfirm: function () {
                    return new Promise(function (resolve) {
                        setTimeout(function () {
                            resolve()
                        }, 2000)
                    })
                    object.status = true;
                    object.ele = ev;
                    object.ele.click();
                }
            }).then(function () {
            })
            return false;

        };
    </script>

<asp:ImageButton ImageUrl="~/dist/img/delete.png" runat="server" CommandName="Delete" OnClientClick="return ConfirmDelete();" ToolTip="Sil" Width="20px" Height="20px" />

CodePudding user response：

Set this up to be more simple. You want that function to return true, or false.

And introduction of a promise and hand stands will not solve this problem, since like most js add-ins, be it jQuery.UI dialogs, or this case sweet alerts, they run asynchronous - and introduction of promise will NOT help you unless that alert routine is being called by other js routines - and it is not.

Also, we "assume" that the button you have is in the grid - looks like it is, but you should have at least provide the surrounding markup.

Not the end of the world.

So, this should work:

Your button, becomes this:

<asp:ImageButton ImageUrl="~/dist/img/delete.png" runat="server"
    CommandName="Delete" 
    OnClientClick="return ConfirmDelete(this);"
    ToolTip="Sil" Width="20px" Height="20px" />

Note VERY careful in above we PASS the button to the js routine.

so, the js can now become this:

<script>
    var ConfirmDeleteOk = false
    function ConfirmDelete(btn) {

        if (ConfirmDeleteOk) {
            ConfirmDeleteOk = false
            return true
        }
        
        swal({
            title: "Are you sure?",
            text: "Are you sure that you want to delete this data?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then(willDelete => {
                if (willDelete) {
                    ConfirmDeleteOk = true;
                    btn.click();
                }
                else {
                    swal("Safe!", "Your imaginary file is safe!", "success");
                }
            });
        return false;
    }

</script>

Note the last line of the routine "return false"

And I don't see ANY reason for creating some js object to return when ALL we care about is returning true or false - so use a simple variable for that.

CodePudding user response：

I solved my problem codes below.

This is button

<asp:ImageButton ImageUrl="~/dist/img/delete.png" runat="server" CommandName="Delete" OnClientClick="return conFunction(this);" ToolTip="Sil" Width="20px" Height="20px" />

This is JS

<script type="text/javascript">
    var object = { status: false, ele: null };
    function conFunction(ev) {
        var evnt = ev;
        if (object.status) { return true; }
        Swal.fire({
            title: 'Silmek istediğinize emin misiniz?',
            text: "Onayladıktan sonra işlem geri alınamaz",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet, Sil',
            cancelButtonText: 'İptal',
            closeOnConfirm: true
        }).then((result) => {
            if (result.isConfirmed) {
                object.status = true;
                object.ele = evnt;
                evnt.click();
            }
        })

        return object.status;
    };
</script>