Styjun

I use sortable's receive to receive elements from a draggable list. When this happens, the element's data is sent to the server using an Ajax call and an entry is created in the database. Once done, an id gets returned and added to the new element.

I also have an update function for the same sortable list, where upon any changes, it loops through the list to grab ids and makes another Ajax call for updating the values.

Problem is that the processes get mixed and the update function grabs all the ids before the new element's id is loaded, meaning it will be short of the new element's id.

$( ".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
 

What can I do to get the functions in 'receive' to finish before moving on to functions in 'update'? Or is there a better way to do this?

Edit:

Sample 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>

UPDATE WITH SOLUTION:

Thanks to a conversation with @elem4th, I was able to solve this by using the 'flag concept'.

1. I created a variable receiveInProgress and set it to false.




2. Then turned the functions inside 'update' into a standalone function updateComponentOrderInDB()



3. 
   

   Inside 'update'

   
   
   

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

   
   



4. Now, at the beginning of 'receive', I set receiveInProgress to true, and at the end of the Ajax call, I set it back to false and run updateComponentOrderInDB(). Now all works in desired order!

The 'receive' and 'update' callbacks are called synchronously by the sortable widget. It is not possible to 'wait' for async calls in receive function to complete before the 'update' fires.

You should approach this differently. You probably don't need the 'update' function at all. You can trigger your 'sort' in createNewComponentInDB function, after the Ajax call is complete. I am assuming you are executing $(newItem).attr('id', response); in callback of your Ajax call, simply put your sorting logic immediately after this line.