I have created a .NET Core project and used a Bootstrap Modal and ajax to Edit and delete data.
But somehow my modal can’t be hidden.
here is my index file
<a href="javascript:void(0)" class="delete" onclick="ConfirmDelete(@item.Id)">
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</a>
<!-- Delete Modal HTML -->
<div id="deleteCategoryModel" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Category</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h6 class="#modal_body"></h6>
<p>Are you sure you want to delete this Category?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Cancel" onclick="closeDeleteModal()">
<input type="button" class="btn btn-danger" value="Delete" onclick="DeleteCategory()">
</div>
</div>
</div>
</div>
<input type="hidden" id="hiddenCategoryId" />
and my code jQuery:
var ConfirmDelete = function (Id) {
$("#hiddenCategoryId").val(Id);
$("#deleteCategoryModel").modal('show');
}
var DeleteCategory = function () {
var Id = $("#hiddenCategoryId").val();
$.ajax({
type: "POST",
url: "/Category/Delete",
data: { id: Id },
success: function (result) {
$("#deleteCategoryModel").modal("hide");
$("#row_" + Id).remove();
}
});
}
var closeDeleteModal = function () {
$('#deleteCategoryModel').modal('hide');
}