javascript - Onclick Delete not stopping before pressing Okay

Question

I am using an onclick on a delete call

"<a href='" + Url.Action("Delete", "OBProfile", new { id = "#= ProfileID#" })
 + "' title='Delete' id='deleteButton' class='btn btn-danger btn-sm 
deleteButton' onclick='return confirm_delete(#= ProfileID#)'>Delete</a>"

and this is the script that it runs

function confirm_delete() {
        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!',
            closeOnConfirm: false
        },
        function () {
            swal("Deleted!", "Your imaginary file has been deleted!", "success");
        });
    };

The issue is that it doesn't stop and wait for the Delete button to be pressed. it calls the script, the box pops up, it deletes the record, and refreshes the page. I need it to process when I click the confirm button. This is done using SweetAlert

Answer 1

So, you anyway have to use jQuery for the swal to work. Therefore, do not use inline event handler like you did (onclick='return confirm_delete...). Use event binding the jQuery way, prevent the default behaviour, when delete is confirmed, set the location to go to the link URL as below.

$("#deleteButton").on("click", function(evt) {
    evt.preventDefault();
    var _this = this;
    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!',
        closeOnConfirm: false
    }, function(isConfirm) {
        if (isConfirm) {
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
            location.href = _this.href;
        }
    });
});

<link href="https://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
<a href='http://www.aol.com' title='Delete' id='deleteButton' class='btn btn-danger btn-sm 
deleteButton'>Delete</a>