Подождите, пока JQuery .replaceWith сделано

Question

Я использую Spring Boot и JQuery, чтобы обновить sh фрагмент на моей веб-странице. Я призываю заменить фрагмент на:

$.get(urlString, function (fragment) { // get from controller
    $("#resultTable").replaceWith(fragment);
});

Затем фрагмент обновляется новой таблицей в виде шаблона Thymeleaf, показанного здесь:

<span id="resultTable">
<th:block th:if="${table} != null and ${tableHead} != null">
    <table id="main" class="display">
        <thead>
            <tr>
                <th:block th:each="columnHeader: ${tableHead}">
                    <td th:text="${columnHeader}"></td>
                </th:block>
            </tr>
        </thead>
        <tbody>
            <th:block th:each="row : ${table}">
                <tr>
                    <th:block th:each="column : ${row}">
                        <td th:text="${column}"></td>
                    </th:block>
                </tr>
            </th:block>
        </tbody>
    </table>
</th:block>

<th:block th:if="${error} != null and ${error} == true">
    <div class="errorBox">
        <p th:text="${errorMsg}"></p>
    </div>
</th:block>

Чтобы сделать его более читабельным, я затем использую JQuery, чтобы обновить таблицу для использования таблицы данных

$('#main').DataTable({
    paging: false
});

Однако таблица еще не переработана таблицами данных, поскольку таблица не фактически обновляется при запуске вышеуказанного блока кода. У меня эти два JQuery оператора выполняются один за другим в скрипте, и если я задерживаю процесс на 5 секунд, он работает как положено. Проблема в том, что если фрагмент занимает больше времени, чем тот, который он получил, что он вполне мог бы получить, так как я обрабатываю SQL запросов, то таблица не получает обновления таблиц данных. Итак, я хочу найти способ остановить сценарий, пока фрагмент фактически не загрузится.

Для ясности, withReplace завершается до того, как таблица добавляется на страницу, поэтому что-то еще завершает замену. Мне просто нужен способ проверить, обновлялась ли таблица снова после запуска withReplace.

Answer 1

Я сделал обходной путь для этого, добавив специальное имя класса в div в конце шаблона тимелист, который появляется только после успешного завершения. Затем я запускаю пользовательское событие, которое отключается и проверяет наличие этого класса каждые несколько секунд, используя задержку.

Я не понимаю закулисных магов c, происходящих здесь, но то, что я заметил, было похоже на то, что работал только один поток, и некоторое время l oop без задержки, которая проверяла наличие Существование класса по существу блокировало бы сценарий, так что таблица никогда не будет сгенерирована, а класс, который он ищет, никогда не вставляется.

В любом случае, вот сценарии JQuery, которые я использовал:

<script>
    $(document).on('click', function(event) {
        var editor = ace.edit("editor");
        if (event.target.id == "querySubmit" && !editor.getReadOnly()) {

            editor.setReadOnly(true);
            editor.setTheme("ace/theme/clouds");

            var urlString = "runQuery?sqlField=" + encodeURI(editor.getValue()) +
                "&dbSelection=" + encodeURI($("#dbSelection  option:selected").text());

            $.get(urlString, function (fragment) { // get from controller
                $("#resultTable").replaceWith(fragment);
            });

            $(document).trigger("one:queryReturned");
        }
    });
</script>
<script>
    $(document).on("one:queryReturned", function(event) {
        if($(".complete").length === 0){
            setTimeout(function () {
                $(document).trigger("one:queryReturned");
            }, 3000);
        }else{

            var complete = $(".complete");
            complete.removeAttr("class");

            var editor = ace.edit("editor");
            editor.setReadOnly(false);
            editor.setTheme("ace/theme/twilight");

            $("#main").DataTable({
                paging: false
            });
        }
    });
</script>

Не стесняйтесь удалить тайм-аут, если хотите испытать это на себе.