调用后 JQuery Bootstrap 模态未关闭

Question

我有一个从 Java 后端获取数据列表的 JQuery。这完美地工作。我要做的是在后端 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 来连接点击事件。请检查您的代码在运行时是否抛出任何javascript 错误。

在成功回调结束时放置隐藏模式调用

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

或在done 回调中起作用。

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

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