jQuery Bootstrap Modal在获取调用后未关闭

Question

我有一个JQuery，它从Java后端获取数据列表。这很完美。我想做的是在后端bean运行时显示加载模式，并在完成并返回数据时隐藏加载模式。

我曾尝试（'toggle'），（'hide'）.close click（）.done（）.fail（）.always（），但似乎没有任何作用。

当我单击按钮时它显示模式，我可以看到数据已加载到html页面的选择列表中，但是在获取完成后，加载模式不会关闭。

<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h4>Loading....</h4></div>
            <div class="modal-body">
                <div class="spinner-grow text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary btn-sm" onclick="getContent()">Get Content</button>

<select class="form-control form-control-sm" id="primaryList"></select>

<script type="text/javascript">
    function getContent() {
        $('#loadingModal').modal('show');

        $.get("/admin/getPrimaryList/", function(data) {
            if(data.length == 0)
            {
                $('#loadingModal').modal('hide');
                return false;
            }
            data.forEach(function(item, i) {
                var option = "<option value='" + item + "'>" + item + "</option>";
                $("#primaryList").append(option);
            });
        }).done(function() {
            $("#loadingModal").modal('hide');
        }).fail(function() {
            $("#loadingModal").modal('hide');
        }).always(function() {
            $("#loadingModal").modal('hide');
        });

        $("#loadingModal").modal('hide');
    };
</script>

谢谢！

Answer 1

对我来说很好。这是我的小提琴：https://jsfiddle.net/davidliang2008/v7kwo8x1/23/

我的小提琴和您的样本之间唯一的区别是，我使用jQuery来连接click事件。请检查代码在运行时是否抛出任何javascript错误。

在成功的回调结束时放置hide模态调用

$.get('URL', function(data) {
    ...
    $('#loadingModal').modal('hide');
});

或在done回调内部有效。

$.get('URL', function(data) {
    ...

}).done(function() {
    $('#loadingModal').modal('hide');
});