I have a problem with bootbox.js modals. I wanted to use bootbox.dialog for pausing UI while Ajax is being executed and waiting for response. Everything works cool if I use dialog.modal('hide');
inside bootbox.alert with confirm (after clicking OK it hides dialog.modal), but I'd not like to confirm it every time. When I'm using dialog.modal('hide');
outside the bootbox.alert with confirm it doesn't hide dialog.modal... Where is the problem? Working code (hiding modal) is inside success
and not working is inside error
var dialog = bootbox.dialog({
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we do something...</p>',
closeButton: false
});
var checkboxId = "#" + $(this).attr('id');
var checked = $(this).is(":checked");
if (checked) {
$.ajax({
url: url,
type: "POST",
data: { estimatedCostId: @Model.EstimatedCostID },
success: function (data) {
if (!data.Success)
{
bootbox.alert(data.ErrorMessage, function () {
dialog.modal('hide');
});
$(checkboxId).prop('checked', !checked);
}
},
error: function (request, status, error) {
dialog.modal('hide');
bootbox.alert("Błąd serwera");
$(checkboxId).prop('checked', !checked);
}
});
}
Most likely, this is a timing issue. If your AJAX call is "too quick", the success/fail callbacks are being called before the bootbox.dialog function has resolved. So, this:
dialog.modal('hide');
winds up being called on an undefined object. I was running into a similar issue on a recent project, and solved it by putting the AJAX call into the shown.bs.modal event, like so:
var checkboxId = "#" + $(this).attr('id');
var checked = $(this).is(":checked");
var dialog = bootbox.dialog({
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we do something...</p>',
closeButton: false
})
// this is the change
.on('shown.bs.modal', function(){
if (checked) {
$.ajax({
url: url,
type: "POST",
data: { estimatedCostId: @Model.EstimatedCostID },
success: function (data) {
if (!data.Success)
{
bootbox.alert(data.ErrorMessage, function () {
dialog.modal('hide');
});
$(checkboxId).prop('checked', !checked);
}
},
error: function (request, status, error) {
dialog.modal('hide');
bootbox.alert("Błąd serwera");
$(checkboxId).prop('checked', !checked);
}
});
}
});