Как асинхронно ждать с jQuery sortable получать и обновлять? - PullRequest
Новая
       33

Как асинхронно ждать с jQuery sortable получать и обновлять?

1 голос
/ 21 марта 2019

Я использую Сортируемое получение для получения элементов из перетаскиваемого списка.Когда это происходит, данные элемента отправляются на сервер с помощью вызова Ajax, и в базе данных создается запись.После этого идентификатор возвращается и добавляется в новый элемент.

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

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

$( ".sort1" ).sortable({
    connectWith: ".sortable-sections",
    stack: ".sortable-sections ul",
    cancel: "input,textarea,button,select,option,[contenteditable],.editorArea,.unsortable",
    receive: function(event, ui) {
        // lots of things happen
        createNewComponentInDB(data); 
        // leads to the ajax post which if successful $(newItem).attr('id', response); 
    },
    update: function(event, ui) {
        // grab list items indexes and ids
        // ajax post to update in database
    }

Что я могу сделать, чтобы завершить функции в «получении», прежде чем переходить к функциям в «обновлении»?Или есть лучший способ сделать это?

Редактировать:

Пример HTML: 

<ul class="space-sections sortable-sections sort1 ui-sortable"> 
    <li class="space-section drag draggable-item ui-sortable-handle" id="5c920e65a7917045fbf62d45" data-component-type="list"> 
    /* ... lots of nested stuff */
    </li>
    <li class="space-section drag draggable-item ui-sortable-handle" id="5c920e6ca7917045fbf62d46" data-component-type="list"> 
    /* ... lots of nested stuff */
    </li>
</ul>

ОБНОВЛЕНИЕ С РЕШЕНИЕМ:

БлагодаряПосле разговора с @ elem4th я смог решить эту проблему, используя «концепцию флага».

  1. Я создал переменную receiveInProgress и установил для нее значение false.

  2. Затем превратил функции внутри «update» в отдельную функцию updateComponentOrderInDB ()

  3. Внутри «update» 

        if (receiveInProgress == true) {
        console.log("Receive in progress! Update will happen on its own.")
    } else {
        updateComponentOrderInDB();
    }

  4. Теперь, в начале 'receive', я установил значение receiveInProgress в true, а в конце вызова Ajax вернул значение false и запустил updateComponentOrderInDB ().Теперь все работает в нужном порядке!

1 Ответ

2 голосов
/ 21 марта 2019

Обратные вызовы 'receive' и 'update' синхронно вызываются сортируемым виджетом.Невозможно дождаться завершения асинхронных вызовов в функции receive до того, как произойдет обновление.

Вам следует подойти к этому по-другому.Вам, вероятно, не нужна функция 'update' вообще.Вы можете запустить свою «сортировку» в функции createNewComponentInDB после завершения вызова Ajax.Я предполагаю, что вы выполняете $(newItem).attr('id', response); в обратном вызове вашего Ajax-вызова, просто поместите логику сортировки сразу после этой строки.

...