Hello. Please help with this code. It is for a recruitment website.
I want to filter the jobs by:
- Country
- City
- Job Sector
In that order.
My drop downs are:
- CountryFilterDropdown – works with “CountryListDataset”
- CityFilterDropdown – works with “CityListDataset”
- JobSectorFilterDropdown – works with “JobSectorListDataset”
My collection is called Jobs – works with “JobsDataset”
Here is my code following your tutorial:
import wixData from ‘wix-data’;
$w.onReady(function () {
$w(‘#CountryFilterDropdown’).onChange((event) => {
$w(‘#JobsDataset’).onReady(() => {
const country = event.target.value; //$w(‘#CountryFilterDropdown’).value
$w(‘#JobsDataset’).setFilter(
wixData.filter().eq(“country”, country)
)
$w(‘#CityListDataset’).setFilter(
wixData.filter().eq(“country”, country)
)
});
});
$w(‘#CityFilterDropdown’).onChange((event) => {
$w(‘#JobsDataset’).onReady(() => {
const city = event.target.value;
$w(‘#JobsDataset’).setFilter(
wixData.filter().eq(“city”, city)
)
});
});
$w(‘#JobSectorFilterDropdown’).onChange((event) => {
$w(‘#JobsDataset’).onReady(() => {
const jobSector = event.target.value;
$w(‘#JobsDataset’).setFilter(
wixData.filter().eq(“jobSector”, jobSector)
)
});
});
});
How I understand this is that, in the first part (CountryFilterDropdown) there is a code to filter the second the second dropdown (CityFilterDropdown) to only show cities from the specific country within the collection. That works fine.
When I move on to the second dropdown (CityFilterDropdown), it works great. Only shows cities from the country chosen in the first drop down and filter the jobs accordingly.
It is the third dropdown (JobSectorFilterDropdown) that I have an issue with. When I select Job sector, it displays all the jobs within that sector from all the countries disregarding the first two filters (Country and city).
Kindly me with the third filter code so that it only displays jobs within the job sector chosen in dropdown 3 (job sector) from the country and city chosen from dropdowns 1 (Country) and 2 (City) respectively.
Just formatting your code so it is easier to read - using the preformatted text selector
import wixData from ‘wix-data’;
$w.onReady(function () {
$w(‘#CountryFilterDropdown’).onChange((event) => {
$w(‘#JobsDataset’).onReady(() => {
const country = event.target.value; //$w(‘#CountryFilterDropdown’).value
$w(‘#JobsDataset’).setFilter(
wixData.filter().eq(“country”, country)
)
$w(‘#CityListDataset’).setFilter(
wixData.filter().eq(“country”, country)
)
});
});
$w(‘#CityFilterDropdown’).onChange((event) => {
$w(‘#JobsDataset’).onReady(() => {
const city = event.target.value;
$w(‘#JobsDataset’).setFilter(
wixData.filter().eq(“city”, city)
)
});
});
$w(‘#JobSectorFilterDropdown’).onChange((event) => {
$w(‘#JobsDataset’).onReady(() => {
const jobSector = event.target.value;
$w(‘#JobsDataset’).setFilter(
wixData.filter().eq(“jobSector”, jobSector)
)
});
});
});
And we always do pay attention onto the wrong used → ’ ’ ← (but yeah, it’s the stupid editor of this forum i know).
Hi Dan,
Do you know how to make this work? My third filter doesnt work. When I select a job sector, it shows all the sector jobs in multiple countries and cities within the sector instead of jobs from choses country and city within the sector. Help if you can. Thanks.
$w.onReady(function () {
$w('#CountryFilterDropdown').onChange((event) => {
$w('#JobsDataset').onReady(() => {
const country = event.target.value; // or $w('#CountryFilterDropdown').value
$w('#JobsDataset').setFilter(
wixData.filter().eq("country", country)
);
$w('#CityListDataset').setFilter(
wixData.filter().eq("country", country)
);
});
});
$w('#CityFilterDropdown').onChange((event) => {
$w('#JobsDataset').onReady(() => {
const city = event.target.value;
$w('#JobsDataset').setFilter(
wixData.filter().eq("city", city)
);
});
});
$w('#JobSectorFilterDropdown').onChange((event) => {
$w('#JobsDataset').onReady(() => {
const jobSector = event.target.value;
$w('#JobsDataset').setFilter(
wixData.filter().eq("jobSector", jobSector)
);
});
});
});
Well regarding this code, i can see some issue…
# Issues in your code:
-
Wrong quote characters**:
-
You use fancy quotes like ‘’ instead of regular single ' or double " quotes. This will cause syntax errors (but i did already mentioned it.
-
Using .onReady() inside .onChange() handlers is unnecessary and can cause unintended delays. You only need to call setFilter on the dataset directly when the dropdown changes. The dataset should already be ready.
-
Filter replacement problem:
Each dropdown’s .setFilter() call replaces any existing filter on that dataset. So if you select country first, then city, the city filter will override the country filter — you lose combined filtering.
—> here we go —>
My third filter doesnt work.
1) IMPROVEMENT-STEP-I:
import wixData from 'wix-data';
$w.onReady(function () {
$w('#CountryFilterDropdown').onChange((event) => {
const country = event.target.value;
$w('#JobsDataset').setFilter(
wixData.filter().eq("country", country)
);
$w('#CityListDataset').setFilter(
wixData.filter().eq("country", country)
);
});
$w('#CityFilterDropdown').onChange((event) => {
const city = event.target.value;
$w('#JobsDataset').setFilter(
wixData.filter().eq("city", city)
);
});
$w('#JobSectorFilterDropdown').onChange((event) => {
const jobSector = event.target.value;
$w('#JobsDataset').setFilter(
wixData.filter().eq("jobSector", jobSector)
);
});
});
2) IMPROVEMENT-STEP-II
import wixData from 'wix-data';
$w.onReady(function () {
// Store filter values
let filters = {
country: null,
city: null,
jobSector: null
};
// Function to apply combined filters
function applyFilters() {
let filter = wixData.filter();
if (filters.country) {
filter = filter.eq("country", filters.country);
}
if (filters.city) {
filter = filter.eq("city", filters.city);
}
if (filters.jobSector) {
filter = filter.eq("jobSector", filters.jobSector);
}
$w('#JobsDataset').setFilter(filter);
}
$w('#CountryFilterDropdown').onChange((event) => {
filters.country = event.target.value || null;
// Also update CityListDataset filter to keep city dropdown in sync if you want
if (filters.country) {
$w('#CityListDataset').setFilter(wixData.filter().eq("country", filters.country));
} else {
$w('#CityListDataset').setFilter(wixData.filter()); // clear filter if no country
}
applyFilters();
});
$w('#CityFilterDropdown').onChange((event) => {
filters.city = event.target.value || null;
applyFilters();
});
$w('#JobSectorFilterDropdown').onChange((event) => {
filters.jobSector = event.target.value || null;
applyFilters();
});
});
- Make some more improvements and get it to work…
GOOD-LUCK!!!
Thanks code Ninja. Let me try that and give feedback.
Hi there again code Ninja.
Now, the improvement work marvelously. Thanks. Also noted the elements IDs are case sensitive. Corrected that and it was ok.
The filters are working nicely as intented. I have ran into a little unintended trouble. To get the dropdowns to work with the code, I had to use ‘collect content’ instead of ‘filter content’. That means it gets rid of ‘All’ in the dropdown items (that can be used for ‘reset’). Now some countries only have one city under them. So if you go back and change the country that happens to have just one city, all results are removed and nothing shows unlike when you have a country with several cities and enables you change the city and filter the results again. Basically, the ‘change’ of city re-enables filtering again…or else a page refresh resets everything which isnt ideal. Any ideas?
Also, are you able to help with the code to reset all filter say for a search reset button?
I would recommend → Search results for 'reset filter' - Community Support Forum | Wix Studio
Read those posts. There are enough solutions already out there, since this is a common and known problem. You will surely find the right post which will fit your needs.
1 Like
Thanks. Will check it out.