How to delay the enabling of a dropdown menu?

Ask the community
,
1

In a submission form, I have a dropdown menu for “state” and another dropdown menu for “city”, the second one being disabled until “state” is selected so that the “city” items can be filtered in the dataset for the state that’s chosen.

My problem is that the “city” dropdown menu is enabled before the filtering is done, so there’s initially a list of all US cities before the list reconfigures itself. I would like to be able to enable the dropdown menu only after the dataset is filtered.

I tried forum posts, Velo articles, and Youtube videos on Promises and then/async/await, but my coding experience is limited and I couldn’t get any clarity with the code that I currently have. I was inclined to try the “then” statement but wasn’t able to figure out how to create a new promise in this context, or what to put after the “then”, and nothing I tried ended up working.

Here is an image of the issue and the code:

1598×882 33.4 KB

1244×868 48.2 KB

It seems it might be a matter of studying more deeply, but even if so, I’d appreciate it if you could point me in the right direction to fix this.

2

To delay somethign —> use → 

let delayTime = 5000 //---> euqals 5-secs.
setTimeout(()=>{  your code here which has to be delayed!   }delayTime);
3

Thanks for that info - I didn’t name my title in the best way. I’m actually ideally looking for a way to trigger the enable function after the dataset is filtered, rather than to delay it by a specific duration. I’ve tried your suggestion and it’s providing a helpful workaround. However, the issue still comes up when the dataset happens to be filtered slower than other times, and it becomes a struggle between choosing a longer duration (~1.5-2 seconds is needed to cover those rare occasions) vs. risk having it do the lag when loading the new list.

I like learning new skills and do like the idea of having the code be as precise as possible, so if there are any suggestions re: triggering it after dataset filter, please let me know.

4

What you perhaps will need is to → AWAIT before progress next task…

—> ASYNC-AWAIT

If you would provide your code inside a good formated → CODE-BLOCK and not inside a ----> PIC, perhaps i would take a look onto it (copy&paste).

5

Right, that’s what I was thinking (then, await, async, one of those) as I mentioned in the post, but couldn’t make much headway because the examples in the Velo articles were mostly for wixdata queries, and/or I couldn’t see what kind of a Promise I would have to create in this scenario.

I’ve been trying to learn enough to accomplish the functions I need for my website, but my knowledge of coding is still very superficial.

6

As i already told you —> i need the code to work with. Please serve your code in a CODE-Block instead of a PIC → than i will be able to inspect it a little bit more.

I am a lazy person, who do not want to retype code from pics → waste of time.

7

Oh sure (the second part of your previous post was missing and just updated on my end) here’s the code:

import { usStates , canadaStates } from ‘public/location’ ;
import wixData from ‘wix-data’ ;

$w . onReady ( function () {
$w ( ‘#state’ ). options = usStates ;
$w ( ‘#country’ ). onChange (() => {
if ( $w ( ‘#country’ ). value === ‘United States’ ) {
$w ( ‘#state’ ). options = usStates ;
$w ( ‘#state’ ). placeholder = ‘Select a State’ ;
$w ( ‘#state’ ). enable ();
}
else if ( $w ( ‘#country’ ). value === ‘Canada’ ) {
$w ( ‘#state’ ). options = canadaStates ;
$w ( ‘#state’ ). placeholder = ‘Select a Province’ ;
$w ( ‘#state’ ). enable ();
}
else {
$w ( ‘#state’ ). value = ‘’ ;
$w ( ‘#state’ ). disable ();
}
});
$w ( ‘#state’ ). onChange (() => {
$w ( ‘#dataset1’ ). setFilter ( wixData . filter (). contains ( ‘state’ , $ w ( ‘#state’ ). value ))
$w ( ‘#city’ ). enable ();
});
});

8

Tomorrow you will get your hints…see you… → now it’s time to go to bed😉

9

Thanks so much for your time!

10

I took a look onto your code and what you are trying to achieve.
I would suggest you to read this post here. There you will be able to find a better way of how to work with DROPDOWNS → CONNECTED to a DATABASE.

11

I will look into this and post again when I get out the other end! Thank you.

12

Hello again Velo-Ninja, what I took away from your code in the post you sent is that I should somehow model the following part:

$w . onReady ( async ()=>{
await wixData . query ( DATABASE )
. limit ( DBLIMIT ). find ()
. then ( results => {
ITEMS = results . items
create_UniqueDropdown 1 ( ITEMS );
});

$w ( DD_ID1 ). onChange (()=>{ 
   **let**  INDEX  =  $w ( DD_ID1 ). selectedIndex 
   $w ( txtFieldID ). value  =  ITEMS [ INDEX ][ OUTPUT_FIELD ];  
});

});

As I said I’m very inexperienced with coding anything from scratch, so I’ll just tell you how far I got (not very far):
1) Since I already have an onReady(function), should I be adding an onReady(async) below it? I think I read about it being best practice to not have more than one onReady, so I was confused about that.
2) I’m having trouble seeing how to integrate the async/await with the relevant portion of my code (last part):
$w ( ‘#state’ ). onChange (() => {
$w ( ‘#dataset1’ ). setFilter ( wixData . filter (). contains ( ‘state’ , $w ( ‘#state’ ). value ))
$w ( ‘#city’ ). enable ();
});
});
3) When I was experimenting with this, I started to add the following to the existing code:
$w . onReady ( async ()=>{
await wixData . query ( ‘WorkshopForm’ )
. then ( results => {
});
but already received an error saying “Property ‘then’ does not exist on type ‘WixDataQuery’” .

If it seems that I’m not knowledgeable enough to accomplish this, feel free to let me know. I’m sure everyone would like to have easy answers and it’s not always possible.