Bootbox Conform не показывает - PullRequest
Новая
       10

Bootbox Conform не показывает

0 голосов
/ 11 июня 2018

Bootbox Conform не показывает нажатие кнопки ссылки.Перепробовал так много всего, BootBox, Bootstrap и Jquery установлены в последнюю очередь.Кажется, после нажатия кнопки, диалоговое окно создается в верхней правой части нижней навигационной панели, потому что там значок мыши изменяется в 2 точках, но соответствующая модель или диалоговое окно не отображаются или не отображаются.Вот мой HTML-код: 

<table id="customers" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th scope="col">Customers</th>
                <th scope="col">Membership Type</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var customer in Model)
            {
                <tr>
                    <td scope="row">@Html.ActionLink(customer.Name,"Edit","Customers",new { customer.Id },null)</td>
                    <td scope="row">@customer.MembershipType.Name</td>
                    <td scope="row"><button data-customer-id="@customer.Id" class="btn btn-link js-delete">Delete</button>
                </tr>
            }
        </tbody>
    </table>

Вот мой код Java Script: 

@section scripts
{
    <script>
        $(document).ready(function () {
            $("#customers .js-delete").on("click", function () {
                //e.preventDefault();
                var butten = $(this);
                bootbox.alert("Are You sure You want to Delete this Customer?")
                bootbox.confirm("Are You sure You want to Delete this Customer?", function (result) {
                        
                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + butten.attr("data-customer-id"),
                            method: "DELETE",
                            success: function () {
                                butten.parent("tr").remove();
                            }
                        });
                    }
                });
                //if (confirm("Are You sure You want to Delete this Csustomer?")) {
                    
                //}
            });
        });
    </script>
}

Также, если я использую подтверждение по умолчанию вместо подтверждения загрузочной коробки, все работает нормально, но после нажатия кнопки удаления запись удаляется, но страница не обновляется.

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Я настроил фрагмент для использования с BS4 и jquery 3.3.1 с Bootbox 4.4.0

Я удалил ваш вызов ajax для простоты, но в остальном я не вижу проблемы. 

$(document).ready(function() {
  $("#customers .js-delete").on("click", function() {
    bootbox.alert("Are You sure You want to Delete this Customer?");
    bootbox.confirm("Are You sure You want to Delete this Customer?", function(result) {
      if (result) {
        console.log(result);
      }
    });
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>


<table id="customers" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th scope="col">Customers</th>
      <th scope="col">Membership Type</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    @foreach (var customer in Model) {
    <tr>
      <td scope="row">@Html.ActionLink(customer.Name,"Edit","Customers",new { customer.Id },null)</td>
      <td scope="row">@customer.MembershipType.Name</td>
      <td scope="row"><button data-customer-id="@customer.Id" class="btn btn-link js-delete">Delete</button>
    </tr>
    }
  </tbody>
</table>
0 голосов
/ 11 июня 2018

Я нашел решение.Похоже, что Bootbox имеет проблемы с Bootstrap 4.0 и выше.Я установил бутстрап 3.3.7.Теперь Bootbox работает нормально.Любое предложение, как заставить это работать с начальной загрузкой 4.0 и новее?

...