Hi, this example should be great for my website and works beautifully the majority of the time. However intermittently and seemingly randomly (despite extensive testing, no pattern is emerging), I get the default settings for the drop down filters - “strawberry”, “chocolate” etc. - appearing in one or more of the drop down filters (it often changes which filter or filters are affected), rather than the drop down options imported from the database. I have several pages, each using this code (adapted for each page) and displaying a different database, and using up to 10 drop down filters and this problem occurs on all of them, to a lesser or greater degree. If you can help, I would be very grateful. This is my code for one of the pages…
import wixData from “wix-data”;
$w.onReady( function () {
$w(‘#iTitle’)
$w(‘#iCounty’)
$w(‘#iGeog’)
$w(‘#dataset1’)
$w(‘#text102’)
});
let lastFilterTitle;
let lastFilterCounty;
let lastFilterGeog;
export function iTitle_change(event, $w) {
filter($w(‘#iTitle’).value, lastFilterCounty, lastFilterGeog);
}
export function iCounty_change(event, $w) {
filter(lastFilterTitle, $w(‘#iCounty’).value, lastFilterGeog);
}
export function iGeog_change(event, $w) {
filter(lastFilterTitle, lastFilterCounty, $w(‘#iGeog’).value);
}
function filter(title, county, geog) {
if (lastFilterTitle !== title || lastFilterCounty !== county || lastFilterGeog !== geog) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.eq(‘title’, title);
if (county)
newFilter = newFilter.eq(‘county’, county);
if (geog)
newFilter = newFilter.eq(‘geog’, geog);
$w(‘#dataset1’).setFilter(newFilter)
.then(() => {
if ($w(‘#dataset1’).getTotalCount() ===0) {
$w(‘#text102’).show();
}
else {
$w(‘#text102’).hide();
}
})
. catch ((err) => {
console.log(err);
});
lastFilterTitle = title;
lastFilterCounty = county;
lastFilterGeog = geog;
}
}
// Run a query that returns all the items in the collection
wixData.query(“Psychologists”)
// Get the max possible results from the query
.limit(1000)
.ascending(“title”)
.distinct(“title”)
.then(results => {
let distinctList = buildOptions(results.items);
// unshift() is like push(), but it prepends an item at the beginning of an array
distinctList.unshift({ “value”: ‘’, “label”: ‘All Psychologists’});
//Call the function that builds the options list from the unique titles
$w(“#iTitle”).options = distinctList
});
function buildOptions(items) {
return items.map(curr => {
//Use the map method to build the options list in the format {label:uniqueTitle, valueuniqueTitle}
return { label: curr, value: curr };
})
}
// Run a query that returns all the items in the collection
wixData.query(“Psychologists”)
// Get the max possible results from the query
.limit(1000)
.ascending(“county”)
.distinct(“county”)
.then(results => {
let distinctList = buildOptions(results.items);
// unshift() is like push(), but it prepends an item at the beginning of an array
distinctList.unshift({ “value”: ‘’, “label”: ‘All Counties’});
//Call the function that builds the options list from the unique titles
$w(“#iCounty”).options = distinctList
});
function buildOptions1(items) {
return items.map(curr => {
//Use the map method to build the options list in the format {label:uniqueTitle1, valueuniqueTitle1}
return { label: curr, value: curr };
})
}
// Run a query that returns all the items in the collection
wixData.query(“Psychologists”)
// Get the max possible results from the query
.limit(1000)
.ascending(“geog”)
.distinct(“geog”)
.then(results => {
let distinctList = buildOptions(results.items);
// unshift() is like push(), but it prepends an item at the beginning of an array
distinctList.unshift({ “value”: ‘’, “label”: ‘All Regions’});
//Call the function that builds the options list from the unique titles
$w(“#iGeog”).options = distinctList
});
function buildOptions2(items) {
return items.map(curr => {
//Use the map method to build the options list in the format {label:uniqueTitle2, valueuniqueTitle2}
return { label: curr, value: curr };
})
}
export function button45_click(event, $w) {
//Add your code for this event here:
filter($w(‘#iTitle’).value=‘’, $w(‘#iCounty’).value=‘’, $w(‘#iGeog’).value=‘’);
}