Can't get my onChange event to sync with a gallery

Ask the community
,
1

(All the code is at the bottom of the post)

I am trying to make a live-updating gallery based on dropdown input but I can’t seem to make the dropdown selections do anything to the gallery. There are a lot of variables that could be messing it up but everytime I try to change something other issues pop-up.

As might be obvious I am quite a newbie to this, any help pointing out my mistakes would be greatly appreciated.

I have double-checked all the id’s so I don’t imagine those are the issue. I’ve also gone through the tutorials and other posts but I couldn’t find anything similar enough to my case.

Also, I assigned the searchList_change event to all 4 dropdowns.

import wixData from "wix-data";
import {bmwSuvModels, mercedesSuvModels} from 'public/suv-models';
import {suvBrands} from 'public/suv-brands';
import {sedanBrands} from 'public/sedan-brands';

$w.onReady(function() {
    $w('#dropdown2').options = suvBrands;
    $w('#dropdown1').onChange(() => {
 if ($w('#dropdown1').value === 'SUV') {
            $w('#dropdown2').options = suvBrands;
            $w('#dropdown2').placeholder = 'Brand';
            $w('#dropdown2').enable();
        }
 else if ($w('#dropdown1').value === 'Sedan') {
            $w('#dropdown2').options = sedanBrands;
            $w('#dropdown2').placeholder = 'Brand';
            $w('#dropdown2').enable();
        }
    });
});

$w.onReady(function() {
    $w('#dropdown2').onChange(() => {
 if ($w('#dropdown2').value === 'BMW') {
            $w('#dropdown3').options = bmwSuvModels;
            $w('#dropdown3').placeholder = 'Brand';
            $w('#dropdown3').enable();
        }
 else if ($w('#dropdown2').value === 'Mercedes') {
            $w('#dropdown3').options = mercedesSuvModels;
            $w('#dropdown3').placeholder = 'Brand';
            $w('#dropdown3').enable();
        }
    });
});

export function searchList_change(event) {
 wixData.query("Find your car")
    .contains("Type", $w("#dropdown1").value)
    .contains("Brand", $w("#dropdown2").value)
    .contains("Model", $w("#dropdown3").value) 
    .contains("Model Year", $w("#dropdown4").value)    
    .find()
    .then(res => {   
      $w("#gallery1").items = res.items;
      $w("#gallery1").expand 
    });
}
2

Hi Layth,

One thing that I’m noticing is that you are using the “friendly” collection name “Find your car” and not the collection ID. You have to use the collection ID, probably something like “Findyourcar” when referring to the collection in code.

Click on Edit Settings in the Content Manager to bring up the dialog where you can verify the actual collection ID:

Are your

3

Okay, a tiny bit of progress. I fixed the collection ID and now the gallery is refreshing, but displaying nothing

4

It’s unclear how you are getting the dropdown options populated, though I see that you are importing some backend methods? Is that all working correctly?

5

Yes, the dropdowns populate properly. I’m thinking the original issue is that I made them first then tried to patch on the actual “showing the results part”.

The JS file I used to populate #dropdown3 is this:

EDIT: #dropdown1 and #dropdown4 I populated manually from the editor

export const bmwSuvModels = [
    {value:"X7", label: "X7"},
    {value:"X6", label: "X6"},  
    {value:"X5", label: "X5"},
    {value:"X4", label: "X4"},
    {value:"X3", label: "X3"},
    {value:"X2", label: "X2"},
    {value:"X1", label: "X1"},
];

export const mercedesSuvModels = [
    {value:"GLE", label: "GLE Coupe"},
    {value:"G", label: "G-Class"},  
    {value:"GLS", label: "GLS"},
];
6

Make sure you are using the field key and not the field name; Corvid only recognizes the field key and it is case-sensitive. It’s clear you are using the field name on “Model Year”.

Also, is “Model Year” a number or text field? The value from that dropdown is going to be text and not a number, so you need to account for that.

7


These are the choices for model year.

How do I “account for that”?

I changed the field names to the field keys. Gallery still blanks out when I pick the first dropdown