JQuery Bootstrap Modal не закрывается после получения вызова

Question

У меня есть JQuery, который получает список данных из Java-бэкэнда.Это работает отлично.То, что я пытаюсь сделать, это показать модальный режим загрузки, пока работает внутренний компонент, и скрыть модальный режим загрузки, когда он завершит работу и вернет данные.

Я пробовал ('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 при запуске.

Выполнение модального вызова скрытия либо в конце успешного обратного вызова

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

или внутри done обратный вызов сработал.

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

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