bootbox confirm popup box doesn't appear and the page freezes

Question

The regular js confirm popup box works but when i switch to the bootbox format the page freezes. I've installed the latest version of bootbox and bootstrap via package manager console. I've looked at tutorials and followed the exact some steps but happen to face the same issue. I'm not sure if I've explained the problem all that well as i'm new to this.

Here's my code.

@model List<Vidly.Models.Customer>

@{
    ViewBag.Title = "Customer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Customer</h2>

<table id="customers" class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Customers</th>
            <th scope="col">MembershipType</th>
            <th scope="col">Delete</th>

        </tr>
    </thead>
    <tbody>
        @foreach (var customer in Model)
        {

            <tr>
                <td>@Html.ActionLink(customer.Name, "Edit", "Customer", new { id = customer.Id }, null)</td>
                <td>@customer.MembershipType.MembershipTypes</td>
                <td><button data-customers-id="@customer.Id" class="btn-link js-delete">Delete</button></td>
            </tr>

        }
    </tbody>
</table>




@section scripts {



    <script>

       $(document).ready(function () {
            $("#customers .js-delete").on("click",".js-delete", function (e) {

              var button = $(this);
                bootbox.confirm("Are you sure you want to delete this customer?", function (result) {

                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + button.attr("data-customer-id"),
                            method: "DELETE",
                            success: function () {
                                button.parents("tr").remove();
                            }
                        });
                    }
                });
            });
        });



    </script>


}

Answer 1

For your current code, you will fail to find the button element, try to change the selector like

$("#customers").on("click",".js-delete", function (e) {
    var button = $(this);
    bootbox.confirm("Are you sure you want to delete this customer?", function (result) {
    });
});

or,

$("#customers .js-delete").on("click",function (e) {
    var button = $(this);
    bootbox.confirm("Are you sure you want to delete this customer?", function (result) {
    });
});

For using bootbox, you need to use bootstrap.css instead of bootstrap-lumen.css.

Try

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/Site.css",
            "~/Content/datatables/css/datatables.bootstrap.css"));