在第一次Ajax调用之后，DOM在第二个依赖于第一个的Ajax调用之前没有更新

Question

I'm creating an app that allows people to drag from a List to a Slot and then the Slot can accept several sub-items in it, like it's Slot A-1, A-2,...

All of this interaction is done through jQuery UI's draggable and droppable , but in the end, the function is called which contains an Ajax call to load the content for the Slot and it's sub items.

It's important to note that all sub-items are dependent on the Slot.

As I know the input I've tried simulating this on $(document).ready() and since ajax and the functions are asynchronous by default some are done faster, some slower and some sub items fail because the Slot isn't updated at that point.

I've tried to work around this by making those function calls async and awaiting the functions and now it's not working at all even though the calls are made in the correct order which is really confusing.

The dependency of the second ajax call on the first one is related to the first element having a specific data attribute that's required in the second call and for some reason, it's always undefined, even though it technically shouldn't be. I'll explain this further in the example below:

I use this kind of setup (It's very simplified, but it should get the point across):

$(document).ready(function(){
    LoadDemo();
    //...
}); 

async function LoadDemo()
{
    await LoadSlots();
    await LoadSubitems();
}

async function LoadSlots()
{
    LoadSlot(x,y,z);
    LoadSlot(x,y,z);
    LoadSlot(x,y,z);
}
async function LoadSubitems()
{
    LoadSubitem(x,y,z,$(".Slot"))
    LoadSubitem(x,y,z,$(".Slot"))
    LoadSubitem(x,y,z,$(".Slot"))
}

Now inside the LoadSlot ajax calls a PHP script which generates HTML that gets inserted in the slot. this HTML also contains the required data attributes. To be 100% sure the data information is loaded in jQuery as well (since I've heard there can be some issues with that for some reason) I manually update the data in the LoadSlot() call like this:

$(name).data("name",$(name).attr("data-name"));

I've traced the debug and can confirm that when this is called $(name).attr("data-name" is not undefined/null and has the proper value, which means after this, the data should also, however not until all javascript is finished processing, the data remains undefined.

Additionally, even though the functions for adding SubItems appear AFTER the Slot calls, once the ajax error Alert shows up, the DOM still doesn't contain the HTML it should at that point, like it's stuck until all code is processed, even though it shouldn't be.

Once the initial javascript is over and I close all alerts, I can then do the drag/drop from the List (which, again, does the same thing, calls LoadSlot() or LoadSubitem() and it works just fine.

So the question is basically this: How can I ensure that the DOM is properly updated with information from the LoadSlots() before LoadSubitems() is called?

Answer 1

The problem is that you're not using await() in LoadSlots() , so it's not waiting for the AJAX calls to complete.

async function LoadSlots()
{
    await LoadSlot(x,y,z);
    await LoadSlot(x,y,z);
    await LoadSlot(x,y,z);
}

Of course, this means that you have to code LoadSlot() as a proper asynchronous function. If it calls $.ajax() , you can simply have it return that call, since it returns a promise.

If you don't want each of the LoadSlot() calls to wait for the previous one to finish, you can use Promise.all() :

async function LoadSlots() {
    await Promise.all([LoadSlot(x, y, z), LoadSlot(x, y, z), LoadSlot(x, y, z)]);
}