I currently have an ASP.NET MVC webpage with Bootstrap and several plugins integrated. I am attempting to implement a confirmation message using the Bootbox plugin before deleting a record, followed by reloading the page upon successful deletion.
Everything appears to be functioning correctly, however, the second ajax call is not executed unless I set a breakpoint in the browser and manually step through the code. No error messages are displayed in the Console.
Below is the snippet of code I am using:
bootbox.confirm({
title: 'Delete Category',
message: '<div class="text-center text-danger">Are you sure you want to delete this category?</div>',
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}},
callback: function (result) {
if (result == true) {
$.ajax(
{
url: '@Url.Action("CategoryDelete", "Admin")',
type: 'POST',
data: { cid : catid },
success: function (delresult) {
if (delresult.success) {
$.ajax({
url: '@Url.Action("CategoryList", "Admin")'
});
}
else {
bootbox.alert({
title: 'Delete Category',
message: '<div class="text-center text-danger">The category could not be deleted!</div>',
buttons: {
ok: {
label: 'ok',
className: 'btn-default'
}
}
});
}
}
}
)
}}
})
As this is my first time posting a question, please let me know if any additional information is needed. This issue occurs in both Firefox and Chrome, working only when a breakpoint is set.
My question is whether there is an error in the code despite its apparent functionality, or if I have overlooked something crucial?
Any guidance or suggestions would be greatly appreciated. Thank you in advance.