Yes No Confirm Box using jQuery SweetAlert plugin in ASP.Net

Last Reply 9 months ago By dharmendr

Posted 9 months ago

I am trying to replace Alert with Bootstrap alert but not able find perfect solution.

I want to pop alert box with Yes or No. If user select Yes than process resumes with operations. If user select No the current pop will hide.

Any help will be appreciated.

            var me = $(this);
            if (me.data('requestRunning')) {
                return;
            }
            me.data('requestRunning', true);
            if (confirm("Do you want to delete ?")) {
                var row = $(this).closest("tr");
                var ProductID = {
                    ProductID: row.find(".ProductID").find("span").html()
                }

                $.ajax({
                    type: "POST",
                    url: '@Url.Action("DeleteData", "Product")',
                    data: JSON.stringify(ProductID),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        row.remove();
                    }
                                    });
            }
            me.data('requestRunning', false);

 

 

Posted 9 months ago Modified on 9 months ago

Hi yogesjoshi,

You can use any plugin like sweetalert plugin to achieve this.

Refer the below sample and implement in your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.js'></script>
    <link media="screen" rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.css' />
    <link media="screen" rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.css' />
    <script type="text/javascript">
        function functionConfirm(event) {
            swal({
                title: 'Do you want to delete ?',
                showCancelButton: true,
                showConfirmButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger',
                type: 'warning',
                buttonsStyling: false
            }).then(function (yes) {
                // Called if you click Yes.
                if (yes) {
                    // Make Ajax call.
                    swal('Deleted', '', 'success');
                }
            },
            function (no) {
                // Called if you click No.
                if (no == 'cancel') {
                    swal('Cancelled', '', 'error');
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <input type="submit" value="Delete" id="btnDelete" class="btn btn-danger" onclick="functionConfirm(this); return false;" />
    </div>
</body>
</html>

Demo