【发布时间】：2020-06-01 15:11:43
【问题描述】：
我的应用程序中有显示状态的页面。状态显示在下拉菜单中，有两个选项Active/Inactive。用户只需单击菜单并选择选项即可更改状态。对于那个过程，我使用 JQuery/Ajax onchange 触发器来跟踪状态变化。该代码工作正常并将值保存在数据库中。我遇到的问题与bootbox 和显示加载消息有关。当用户单击菜单并更改状态时，ajax 将发送请求。此时，对话框窗口将显示在用户屏幕上，并显示加载消息。一旦 ajax 请求完成，加载对话框应该隐藏并向用户显示成功保存状态的消息。下面是代码示例：
function alertBox(title, message, size) {
title = title || "Alert";
message = message || "Alert Box";
size = size || "lg";
bootbox.alert({
size: size,
title: title,
message: message
});
};
$('.status').on('change', function() {
let $curr_fld = $(this),
status_id = $curr_fld.attr('data-id'),
dialog = bootbox.dialog({
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Loading...</p>',
closeButton: false
});
$curr_fld.prop("disabled", true);
/*** Start: This is a code for testing. ***/
/*
setTimeout(function() {
dialog.modal('hide');
$curr_fld.prop("disabled", false);
alertBox('Alert Message', status_id);
}, 3000);
*/
/*** End: This is a code for testing. ***/
$.ajax({
type: 'POST',
url: 'test.php?id=1',
data: {
'status_id': status_id
},
dataType: 'json'
}).done(function(obj) {
dialog.modal('hide');
$curr_fld.prop("disabled", false);
if (obj.status === 200) {
alertBox('Alert Message', obj);
} else {
alertBox('Alert Message', obj);
}
}).fail(function(jqXHR, textStatus, errorThrown) {
$curr_fld.prop("disabled", false);
alertBox('Error', textStatus);
});
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>
<table class="table table-striped table-bordered" id="tbl_nofa">
<thead>
<tr class="bg-dark">
<th class="text-center text-white">Section</th>
<th class="text-center text-white">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"> South</td>
<td class="text-center">
<select class="custom-select status" name="status_1" id="status_1" data-id="1">
<option value="A" selected>Active</option>
<option value="I">Inactive</option>
</select>
</td>
</tr>
<tr>
<td class="text-center"> North</td>
<td class="text-center">
<select class="custom-select status" name="status_2" id="status_2" data-id="2">
<option value="A">Active</option>
<option value="I" selected>Inactive</option>
</select>
</td>
</tr>
<tr>
<td class="text-center"> East</td>
<td class="text-center">
<select class="custom-select status" name="status_3" id="status_3" data-id="3">
<option value="A" selected>Active</option>
<option value="I">Inactive</option>
</select>
</td>
</tr>
<tr>
<td class="text-center"> West</td>
<td class="text-center">
<select class="custom-select status" name="status_4" id="status_4" data-id="4">
<option value="A">Active</option>
<option value="I" selected>Inactive</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr class="bg-dark">
<th class="text-center text-white">Section</th>
<th class="text-center text-white">Status</th>
</tr>
</tfoot>
</table>如果您运行上面的代码示例，一旦 ajax 请求完成，您将看到加载对话框仍在屏幕上。我不知道为什么，因为我有.modal('hide')。如果您使用 setTimeout 注释掉代码块并注释掉 ajax 代码，您将看到加载对话框工作正常。如果有人知道如何解决这个问题，请告诉我。
【问题讨论】：
-
我们如何复制问题？我把
dialog.modal('hide');放在了ajax 的fail函数中。我运行你的代码 ajax 给出了错误，然后对话框被隐藏了。所以我确信它应该适用于 ajax 的done函数。 -
@Kenny 运行代码示例并更改状态。然后你会看到问题。
-
我能想到的，你的 ajax 成功/失败是在对话框完成渲染之前执行的
标签： javascript jquery ajax bootstrap-4 bootbox