In summary: we want users to use checkboxes to filter out programs.
Our code:
import wixData from 'wix-data';
export function FilterBySeason(){
let Seasons = [];
// Get the indexes of all the checkboxes checked in that group
let selectedSeasons = $w("#checkboxGroup17").selectedIndices;
// Now, loop through the checked items and add each city to the Cities array
if (selectedSeasons.length > 0){
for (var i = 0; i < selectedSeasons.length; i++) {
Seasons.push($w('#checkboxGroup17').options[selectedSeasons[i]].value);
}
$w("#dataset1").setFilter(wixData.filter()
.hasSome("date", Seasons)
);
} else {
$w("#dataset1").setFilter(wixData.filter()
);
}
}
export function checkboxGroup17_change(event) {
FilterBySeason();
}
$w.onReady(function () {
checkboxGroup17_change($w("#checkboxGroup17").onClick())
});
Wix is saying that checkboxGroup17 is undefined, and nothing filters when interacting with the checkbox. Also, the checkbox, dataset, and field is stated in the code. Should I also have the collection name somewhere? I’m a serious beginner.
After checking your site I have done some changes in your code and elements:
Disconnect all the check groups to the same dataset that the repeater connected to ( I don’t understand why you need to do this connection from the first place)
View this code:
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dataset1").onReady(async () => {
let data = await $w("#dataset1").getItems(0, 4);
console.log("data", data);
})
//checkboxGroup17_change($w("#checkboxGroup17").onClick())
});
export function checkboxGroup17_click(event) {
FilterBySeason();
}
async function FilterBySeason() {
let Seasons = [];
// Get the indexes of all the checkboxes checked in that group
let selectedSeasons = $w("#checkboxGroup17").selectedIndices;
// Now, loop through the checked items and add each city to the Cities array
if (selectedSeasons.length > 0) {
for (var i = 0; i < selectedSeasons.length; i++) {
Seasons.push($w('#checkboxGroup17').options[selectedSeasons[i]].value);
}
} else {
$w("#dataset1").setFilter(wixData.filter());
}
console.log("Seasons", Seasons);
$w("#dataset1").setFilter(wixData.filter()
.hasSome("date", Seasons)
).then(async () => {
let data = await $w("#dataset1").getItems(0, 4);
console.log("data 1 ", data);
})
}
I have done the setFilter() function outside the for loop
I added some console.log() in order to see the data in the dataset before the filer and after ( of courts its not necessary)
Thank you so much for that tip!!! I automatically thought the checkboxes had to be connected for some reason. However, unfortunately, the boxes still arent filtering. Is this because I have to add an .onChange function?
I’m not sure I understand, when I checked the code I sent you I sew that each click on the check group that data in the dataset was filtered and as a result the repeater present different items.
This was extremely helpful!! Thank you so much. I have a couple questions. Is there any way I can make it not as case-sensitive? For instance, if someone selects “fall” in the checkboxes, how can I make a program with “fall” and “winter” tags show in the repeater? At the moment, this can only happen if both “fall” and “winter” are selected.
Also, is there any way I can invert the way programs are shown? So when no boxes are selected, all programs will show, then it will begin filtering out as people select. This question is less significant than the first.
Regarding case-sensitive, why not just use Fall/Winter/etc for the filters. Or, you can do the filtering based on fall/winter/etc, and then use the Repeater’s onItemReady() function to change the way the Repeater is displayed.
For your second question, you can check in code if checkboxes are checked or not, and then reset the filter, like this:
$w("#dataset1").setFilter( wixData.filter() );
This line of code simply sets the filter to an “empty” filter so that the dataset is not filtered.
@sapirh
I’m sorry, I’ve tried a few times and haven’t gotten anything. I’ve also had a colleague try from his end, but with no filtration… Might there be a system error on our end?
Hi Yisrael, I think I found the complication. It looks like the .hasSome function will want to match with all of the filters instead of only a portion. For instance, if one of my programs has “fall, winter” but someone only selects “fall,” this program won’t appear. Do you know how I can remedy this?
Hi @yisrael-wix Sorry if this isn’t the best place to jump in with a new request (it relates to Multiple Filter Options). Is it possible to filter a repeater using multiple groups of Selection Tags? The goal is to be able to separate groups of Selection Tags e.g. #selectionTags1 and #selectionTags2 from where multiple selections can be made in each group to filter a dataset by a ‘tags’ field ( fieldToFilterByInCollection).
My query, in a nutshell, is whether it’s possible to filter by two groups of selection tags, on the same field within a dataset. Example:
“Producers” dataset has multiple tags within a ‘tags’ field e.g. Bordeaux, Burgundy, Red, White, Rosé. I’d like to be able to separate the Selection Tags so #selectionTag1 enables filtering by Region (Bordeaux, Burgundy) and #selectionTag2 by Colour (Red, White, Rose). Then, visitors to the site can filter by Producers from Burgundy that offer white wine etc.
I could throw them all into just one #selectionTag1, and use hasAll(… but visually it would be great if the tags can be separated on the page (like you have with ‘type’ and ‘lighting’ in the checkbox groups).
