Hello,
I’ve been tasked with building a website for a project I’m working on and despite good progress with the site itself I’m struggling with the code for a multiple checkbox filter.
The site and page can be found here: www.routetoresilience.co.uk/services which shows each of the mental health services that are available locally.
I created a database collection for the services (#database1) and a page with a repeater (#repeater1) that displays the relevant information but would like visitors to be able to search the listing using the displayed checkboxes as filters (inspired by this website: https://www.kaltra.de/chillers) with the repeater repopulating each time a checkbox is (un)checked.
Each of the checkboxes (#checkbox1 to #checkbox7) refer to a boolean field on the database. So long as a checkbox is checked then any entries that have that field checked should be pushed through to the repeater. Entries can have multiple fields checked (i.e. a service can offer advice and help) but it’s important not to list the entry twice.
Bearing in mind I have little experience with coding in general (and none in Java) I’ve tried to adapt some code I found on the forums:
But it doesn’t work and I’m out of my depth as to being able to understand why.
Any support / guidance would be much appreciated!
Thanks
Adam
Page code as follows:
import wixData from ‘wix-data’;
let originalServicesInfo = ;
$w.onReady(function () {
// Query to get the information from the database
wixData.query("Services")
.find()
.then((results) => {
originalServicesInfo = results.items;
$w('#repeater1').data = originalServicesInfo;
})
.catch((err) => {
let errorMsg = err;
});
// Set the information to the repeater
$w('#repeater1').onItemReady(($w, itemData) => {
// Add here all the relevant elements of the repeater
$w('#text17').text = itemData.title;
$w('#text20').text = itemData.website;
$w('#text19').text = itemData.description;
$w('#image1').src = itemData.image;
});
});
// Create a filter results function and use if statement for each of your filter fields
function filterServices(){
const filterArray = ;
if ($w(‘#checkbox1’).checked){
filterArray.push(‘gettingAdvice’);
}
if ($w(‘#checkbox2’).checked) {
filterArray.push(‘help’);
}
if ($w(‘#checkbox3’).checked) {
filterArray.push(‘moreHelp’);
}
if ($w(‘#checkbox4’).checked) {
filterArray.push(‘riskSupport’);
}
if ($w(‘#checkbox5’).checked) {
filterArray.push(‘childOrYoungPerson’);
}
if ($w(‘#checkbox6’).checked) {
filterArray.push(‘parentCarer’);
}
if ($w(‘#checkbox7’).checked) {
filterArray.push(‘educator’);
}
return;
}
// For each user input, create an onChange event, filter the results based on the value (call the filterServices function) and set the filtered information to the repeater
export function checkbox1_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
export function checkbox2_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
export function checkbox3_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
export function checkbox4_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
export function checkbox5_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
export function checkbox6_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
export function checkbox7_change(event, $w) {
//filtering the results
const filteredServices = filterServices(originalServicesInfo);
//setting the data
$w(‘#repeater1’).data = filteredServices;
//setting the repeater elements
$w(‘#repeater1’).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(‘#text17’).text = itemData.title;
$w(‘#text20’).text = itemData.website;
$w(‘#text19’).text = itemData.description;
$w(‘#image1’).src = itemData.image;
});
}
