Всплывающее окно подтверждения загрузки не появляется, и страница зависает - PullRequest
Новая
       26

Всплывающее окно подтверждения загрузки не появляется, и страница зависает

0 голосов
/ 20 сентября 2019

Обычное всплывающее окно подтверждения js работает, но когда я переключаюсь в формат загрузочной коробки, страница зависает.Я установил последнюю версию bootbox и начальной загрузки через консоль менеджера пакетов.Я посмотрел учебные пособия и выполнил некоторые шаги, но столкнулся с той же проблемой.Я не уверен, что объяснил проблему все так хорошо, поскольку я новичок в этом.

Вот мой код.

@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>


}

1 Ответ

0 голосов
/ 23 сентября 2019

Для вашего текущего кода вам не удастся найти элемент кнопки, попробуйте изменить селектор, например 

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

или 

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

Для использования загрузочной коробки вам необходимоиспользуйте bootstrap.css вместо bootstrap-lumen.css.

Попробуйте 

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