Bootbox Conform不显示
Bootbox Conform不显示
提问于 2018-06-11 15:05:24
Bootbox Conform不显示单击链接按钮。尝试了这么多东西，BootBox，Bootstrap和Jquery都是最新安装的。似乎在单击按钮后，在导航栏下方的右上角创建了对话框，因为鼠标图标在两个点处发生变化，但不显示或出现一致模型或对话框。下面是我的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脚本代码：
@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>
}
此外，如果我使用默认确认而不是bootbox确认，一切正常，但点击删除按钮后，记录被删除，但页面不刷新。
回答 2
Stack Overflow用户
发布于 2018-06-11 20:40:07
我找到了解决方案。看起来Bootbox在Bootstrap 4.0和更高版本上有问题。我安装了bootstrap 3.3.7。现在Bootbox运行得很好。有什么建议可以让它在bootstrap 4.0和更新版本上工作吗？
Stack Overflow用户
发布于 2018-06-12 04:40:52
我设置了一个用于BS4和jQuery3.3.1以及Bootbox4.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50792085
复制相关文章
相似问题