Trying to add simple list to dropdown. Why doesn't it happen?

Ask the community
,
1

Trying to add a simple array to load a dropdown list.

It doesn’t show up immediately.


let overflightpermitarray = ["paxPrivateOrCorporateNonCommercial", "paxCharterAdhocCommercial", "paxNonScheduled", "cargoFlight", "emptyFerryFlight", "ambulanceFlight"];
        
let landpermitarray = ["paxPrivateOrCorporateNonCommercial", "paxCharterAdhocCommercial", "paxNonScheduled", "cargoFlight", "emptyFerryFlightOrTechnicalLanding", "ambulanceFlight"];

$w.onReady(function () {
    
    $w("#choosepermitdropdown").onChange( (event) => {
        $w('#chooseflightpurpose').enable();
        console.log($w('#choosepermitdropdown').value);
        
        if ($w('#choosepermitdropdown').value === "OverflightPermit"){
            console.log("if stmt started");
            addtodropdown(overflightpermitarray);
           }

        else{
            addtodropdown(overflightpermitarray);
            }

        function addtodropdown(arraytoadd) {
            
            $w('#chooseflightpurpose').options = [];
            let opts = $w("#chooseflightpurpose").options;

            for (let i=0; i<arraytoadd.length; i++){
                opts.push ({"label": arraytoadd[i], "value": arraytoadd[i]});
                console.log(opts);
            }
            
            $w("#chooseflightpurpose").options = opts;
            console.log($w("#chooseflightpurpose").options);
        }

    });

});


In the console.log for $w("#chooseflightpurpose").options , it shows the below
[
  {
    "label": "paxPrivateOrCorporateNonCommercial",
    "value": "paxPrivateOrCorporateNonCommercial"
  },
  {
    "label": "paxCharterAdhocCommercial",
    "value": "paxCharterAdhocCommercial"
  },
  {
    "label": "paxNonScheduled",
    "value": "paxNonScheduled"
  },
  {
    "label": "cargoFlight",
    "value": "cargoFlight"
  },
  {
    "label": "emptyFerryFlight",
    "value": "emptyFerryFlight"
  },
  {
    "label": "ambulanceFlight",
    "value": "ambulanceFlight"
  }
]

BUT THE WEBSITE SHOWS IT LIKE THIS WHEN IT LOADS!

(the loading… is just the default first option i’ve shown)

2122×1012 85.9 KB

Now when I click the (loading…) option, it loads to all the correct values!

1860×1208 111 KB

Basic question! Why is not loading the options correctly when it is first done?

Please help. TIA.

2

Because the codes are inside the onChange() function and when you click on loading, the onChange function starts to run. If you want the data to be added to the input when the page is first loaded, you need to add it directly inside the onReady function.

3

Thanks I get that. But I want the options to load based on the input from the previous dropdown.

So if previousdropdown = “x”, then load overflight array,
else load landingpermit array.

The options are showing up in the console. It just doesn’t show up in the dropdown which is the frustrating bit.

4

Can you try to add array in the onChange function?

930×749 42.9 KB

5

nope. same scenario. I just don’t understand why the options aren’t loading immediately.

Btw, If i click on the (loading…), the options actually come up correctly, like in the 3rd pic attached.

So can it be a bug? Or is there something fundamentally wrong?

6

This is a bug!!!

It works perfectly on the mobile. On the desktop it only loads when the options is clicked. Wasted so much time on this :frowning:

Is there a way this can be reported to the Wix team?

7

This must be a BUG on Wix-Side!
I also already saw this some days ago.

Your SOLUTION:

363×612 13.2 KB

There is a new OPTION inside the Dropdown-property-panel.
Since this was added, you have that problem.

Switch to - - > BROWSER - → try again, then switch back to - - > User-defined - → try again.

You have some success ???

8

Look at my reply.

Wasted so much time on this :frowning:

YES! - → me too! Very annoying!

9

OMG. It worked @russian-dima !!

Set it as browser option!

They really need to update the documentation if there’s such a change!

Wasted my whole sunday evening trying to write some funky code to make it work :smiley:

10

I see you generate fixed-code for dropdowns!
Are you really ok with such an solution ?

let overflightpermitarray = [ “paxPrivateOrCorporateNonCommercial” , “paxCharterAdhocCommercial” , “paxNonScheduled” , “cargoFlight” , “emptyFerryFlight” , “ambulanceFlight” ];

let landpermitarray = [ “paxPrivateOrCorporateNonCommercial” , “paxCharterAdhocCommercial” , “paxNonScheduled” , “cargoFlight” , “emptyFerryFlightOrTechnicalLanding” , “ambulanceFlight” ];

Why not get all options AUTOMATICALY and DIRECTLY out of your existing DATABASE ?

My opinion —> never use HARD-CODINGS, try to stay always flexible, dynamic and generate automatic functions.

Yes HARD-CODINGS are faster to be generated, but not very effective and user/developer-friendly.

11

Yes. Was pulling it out of the database!! But I thought I would hard code to see what was wrong!

Will revert back to pulling it from the database.

12

Maybe you can use such one for your purposes.
Maybe you already have something similar.

async function create_UniqueDropdown(items, DBFIELD, dropdown) {console.log(items)
  const uniqueTitles = await getUniqueTitles(items); 
$w(`#${dropdown}`).options=buildOptions(uniqueTitles); 
  
  async function getUniqueTitles(items) {
  let titlesOnly=await items.map(item=> item[DBFIELD]);
    return [...new Set(titlesOnly)];
  }

  function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
      return {label:curr, value:curr};
    });
  }
}

Good luck!