Bootstrap модальный закрывается до завершения цикла

Question

У меня есть код ниже. По щелчку, он показывает мод загрузки. Когда отображается модальное состояние, код запускается для обхода массива и фильтрации экземпляра datatables.

Все это нормально.

Однако модальное сразу закрывается. Как получить, чтобы модал закрывался, когда все поиски были завершены?

Модал отображается при определенных событиях на странице, поэтому я не могу переместить его за пределы этого конкретного действия щелчка по этому идентификатору.

$( "#apply").on( "click", function() {
            console.log('[+] APPLY THE FILTERS');
            $('#loading').modal('show');

            $('#loading').on('shown.bs.modal', function (e) {
                table.search( '' ).columns().search( '' ).draw();
                $.each( array, function( key, value ) { 
                    var val = $('#'+key).val();

                    var string = $("select#"+key+" option:selected").map(function () {
                        return $(this).text();
                    }).get().join('|');

                    if (!Array.isArray(val) || !val.length || val=='MONGOOSEAHOY') {
                        return true;
                    }
                    else {
                        console.log('[+] COLUMN: '+key);
                        console.log('[+] STRING: '+string);
                        table.columns(array[key]).search('').draw();
                        if (key == 'SKILL_NAME' || key == 'DAILPATTERNDESCRIPTION' || key == 'CLOCKINTIME' || key == 'CLOCKOUTTIME' || key == 'PATTERNTYPEDESCRIPTION' || key == 'ABSTRACTION' || key == 'ABSTRACTIONS') {
                            table.columns(array[key]).search(string,true,false).draw();
                        }
                        else {
                            table.columns(array[key]).search('^('+string+')$',true,false).draw();
                        }
                    }
                });
            })

            $('#loading').modal('hide');

        });

Answer 1

Вы должны поместить команду, чтобы скрыть модальные в функции shown.bs.modal. Также поместите shown.bs.modal вне функции click:

    $('#loading').on('shown.bs.modal', function (e) {
        table.search( '' ).columns().search( '' ).draw();
        $.each( array, function( key, value ) { 
            var val = $('#'+key).val();

            var string = $("select#"+key+" option:selected").map(function () {
                 return $(this).text();
            }).get().join('|');

            if (!Array.isArray(val) || !val.length || val=='MONGOOSEAHOY') {
                return true;
            } else {
                console.log('[+] COLUMN: '+key);
                console.log('[+] STRING: '+string);
                table.columns(array[key]).search('').draw();
                if (key == 'SKILL_NAME' || key == 'DAILPATTERNDESCRIPTION' || key == 'CLOCKINTIME' || key == 'CLOCKOUTTIME' || key == 'PATTERNTYPEDESCRIPTION' || key == 'ABSTRACTION' || key == 'ABSTRACTIONS') {
                    table.columns(array[key]).search(string,true,false).draw();
                } else {
                    table.columns(array[key]).search('^('+string+')$', true, false).draw();
                }
            }
        });
        $('#loading').modal('hide');
    });

    $("#apply").on( "click", function() {
        console.log('[+] APPLY THE FILTERS');            
        $('#loading').modal('show');           
    });