Problem with async/await function

Ask the community
,
1

-Suppose I have 2 dropdown fields…

When an item from the first dropdown is selected it triggers DetailsSelection (see below) which is a function that runs a query with some filters and then populates the second dropdown based on the selection of the first dropdown, It also places a default property for .value() if a user selection had already been made previously and the user decided to go back and change the value of the first dropdown
The selection of the second dropdown triggers a chain of other elements to perform specific actions (show a certain image, show a set of specific buttons for the selection, show descriptive text)

LookBack is a function that only executes in the event that both dropdowns had values previously selected, but the user decided to change the first again. That would trigger the DetailsSelectiin to repopulate the second dropdown and assign the default value.
It’s supposed to read the new value of the second dropdown and reconfigure the next level element actions as described above.

export async function styledropdown_change(event) {
 await
    DetailsSelection();
    LookBack();
}

The issue is that before the new value of the second dropdown populates, the LookBack function finishes execution and falsely determines no change in that dropdown. I imagined that the function above would await DetailsSelection to finish before executing LookBack, but after many console.log tests, it’s never the case. I suspect that it’s only awaiting the callback of the function and not necessarily the function itself.

I’m currently using the workaround below but it’s not as elegant as I would prefer, plus I fear that it may be subject to issues in case of system lag or something like it.

export function styledropdown_change(event) {
    DetailsSelection();
    setTimeout(function() {
        LookBack();
    }, 2000);
}

Can anyone think of a proper fix for the async function?

2

Perhaps you just put the " LookBack ()" function onto the end of your " DetailsSelection ()"-function ? Possible in your case ?

3

I tried it… placing it at the end like you said but still doesn’t register the change

function DesignSelection () {
    wixData.query("graphic")
        .ascending("title")
        .eq("campaign", $w("#campaigndropdown").value)
        .limit(1000)
        .find()
        .then(results => {
             const uniqueTitles = GetTitles(results.items);
             if($w("#graphicimage").isVisible) {
                $w("#designdropdown").options = BuildOptions(uniqueTitles);
                $w("#detailsdropdown").value = uniqueTitles[0];
            }
            else {
                $w("#designdropdown").options = BuildOptions(uniqueTitles);
            }
      });

     function GetTitles(items) {
         const titlesOnly = items.map(item => item.design);
         return [...new Set(titlesOnly)];
    }
    LookBack();
}
4

@eimimitu
NOPE ! This will not work like that.
Wrong place.

Try this one… (perhaps this will work).

function DesignSelection () {
    wixData.query("graphic")
        .ascending("title")
        .eq("campaign", $w("#campaigndropdown").value)
        .limit(1000)
        .find()
        .then(async results => {
             const uniqueTitles = await GetTitles(results.items);
             if($w("#graphicimage").isVisible) {
                $w("#designdropdown").options = BuildOptions(uniqueTitles);
                $w("#detailsdropdown").value = uniqueTitles[0];
            }
            else {
                $w("#designdropdown").options = BuildOptions(uniqueTitles);
            }
          LookBack();
      });

     function GetTitles(items) {
         const titlesOnly = items.map(item => item.design);
         return [...new Set(titlesOnly)];
    }
}
5

@russian-dima
Yes that was it!
And much simpler than what I was attempting originally.
Thanks… you’re the best

6

@eimimitu
No problem.