I have a table with a button Delete. When the button is pressed i want there to be a dialog pop-up asking if i want to delete the item. I think the function is not being called because on pressing the button nothing happens. This is my body with the table
<body style="background-color:ghostwhite; ">
<table id="tableid" style="float: left; margin-top: 5%; margin-left: 5%; border:1px solid black; width: 720px; height: auto; background-color: white">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
@if (User.IsInRole("Pharmacist"))
{
<th>
Order
</th>
}
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@if (User.IsInRole("Administrator"))
{
@Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
<button data-id="@item.Id" class="btn btn-warning js-delete">Delete</button>
}
</td>
</tr>
}
</tbody>
</table>
and this is my script
$(document).ready(function () {
var table = $("#tableid").DataTable();
$("#tableid .js-delete").on("click", function () {
var button = $(this);
bootbox.confirm("Are you sure?", function (result) {
if (result) {
$.ajax({
url: "/Medicines/Delete/" + button.attr("data-id"),
method: "POST",
success: function () {
table.row(button.parents("tr")).remove().draw();
},
error: function (error) {
console.log(error);
}
})
}
})
})
})