bootbox.confirm dose not display the message and page crashed - html

Question

I'm new to bootstrap.I'm trying to show confirm message with bootbox format after click on delete btn .I know that bootbox.confirm need callback function so I utilize result and checked if its true then show it.I expect to see this: Are you sure to delete this customer? but after click noting happen and browser just freeze and I have to refresh it again.
this is all my code:
<h2>Customers</h2>
#Html.ActionLink("ADD New Customer", "CreatNewCustomer", "Customer", new { #class = "form-control" })
#if (!Model.Any())
{
<p> there is no customer</p>
}
else
{
<table id="Customers" class="table table-bordered table-hover">
<thead>
<tr>
<th>Customers</th>
<th>Discount Rate</th>
<th>Delete </th>
</tr>
</thead>
<tbody>
#foreach (var Customer in Model)
{
<tr>
#*<td>#Customer.Name</td>*#
<td>#Html.ActionLink(Customer.Name.ToString(),"Edit","Customer",new {id=Customer.CustomerID },null)</td>
<td>#Customer.MembershipType.MembershipName</td>
<td>
<button data-customer-id="#Customer.CustomerID" class="btn-link js-delete"> Delete</button>
</td>
</tr>
}
</tbody>
</table>
}
#section scripts
{
<script>
$(document).ready(function () {
$("#Customers .js-delete").on("click", function () {
bootbox.confirm("Are you sure to delete this customer?", function (result) {
if (result) {
var butten = $(this)
$.ajax({
url: "/api/customer/" + butten.attr("data-customer-id"),
method: "Delete",
success: function () {
console.log("success"),
butten.parents("tr").remove();
}
})
}
})
})
})
</script>
}
Main part is here:
<script>
$(document).ready(function () {
$("#Customers .js-delete").on("click", function () {
var butten = $(this);
bootbox.confirm("Are you sure to delete this customer?", function (result) {
if (result) {
$.ajax({
url: "/api/customer/" + butten.attr("data-customer-id"),
method: "Delete",
success: function () {
console.log("success"),
butten.parents("tr").remove();
}
})
}
})
})
})
</script>
I can't get what's wrong with that.
When I use bootbox.confirm my code not works but when I use confirm alon like this:
<script>
$(document).ready(function () {
$("#Customers .js-delete").on("click", function () {
var butten = $(this);
confirm("Are you sure to delete this customer?", function (result) {
if (result) {
$.ajax({
url: "/api/customer/" + butten.attr("data-customer-id"),
method: "Delete",
success: function () {
console.log("success"),
butten.parents("tr").remove();
}
})
}
})
})
})
</script>
my code works. I have installed bootbox version 4.3.0 and set in my bundle config like this :
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js"));
And I use vs 2017
Hope someone help me.

Answer 1

If you're trying to get a reference to the button that triggered the click event, you (still) are selecting the wrong item when doing this:
$(document).ready(function () {
var butten = $(this);
Where you have that line in your latest edit, you're selecting the document. What you need is:
$("#Customers .js-delete").on("click", function () {
// THIS is where you select the button...
var butten = $(this);
// ... the rest of your code
}
If you're struggling with this, I suggest spending some time on the jQuery Learning Center: https://learn.jquery.com/