Hi all!
As you’ll be able to tell, I’m fairly new to coding and have been trying my best to search through this forum and implement what I can before asking for help! I’ve worked of so many various methods from guides and questions on this forum already and now I’m a bit overwhelmed. I’ll try and write down as much information as possible:
I’m working on a site for a customer and they have been very specific in what they want (I’ve tried multiple times to compromise with no joy) for a list of schools that used to operate (there will eventually be 100s once the template is implemented).
They would like a table on one page detailing the Name, BFPO (similar to a post code), Camp, Town, Country. Visitors should be able to search by Name, but also search by any former names the school may have had and also be able to filter by BFPO, Camp, Town & Country. They also want to have an A-Z list, which filters all results by the first letter of the school name.
The name should then be linked to a separate page, where the visitor will find all information about the school they have selected. I suggested using Dynamic pages, but they want flexibility and don’t want to enter all the information into tables. They also want the list to be hidden, until the user selects any search bars or filters.
Here’s what I’ve done so far:
- Created a dataset called “Locations” including Name, Formerly, BFPO, Camp, Town, Country, A-Z, URL
- Linked a search bar #formerly to the dataset which searches the Formerly column (set as tags in order to allow multiple entries). I’ve included the actual name within this so that this will be displayed in the table. I’ve not included the Formerly column in the results, this means only the actual name will be displayed (this is what they want, hope that makes sense…)
- Added 4 filter dropdown boxes which are all linked with each other and the search bar
- Added buttons for each letter of the alphabet which are linked to the A-Z column (in the dataset I’ve manually typed in the first letter of each school)
Here’s what I need help with:
- How do I link the A-Z buttons with the filters and search? (e.g. filter the results by country and then click on D in order to only show schools beginning with D and vice versa)
- How do I hide the entire table until a user inputs any searches or filters?
I’ve spent multiple weeks on this trying my best to get by without trying to ask silly questions, but now I’m just stumped…
Thanks in advance!
Here’s the link: https://reubencollar.wixsite.com/bfessce/locations
and here’s the code:
import wixData from 'wix-data';
$w.onReady(function () {
loadBfpo()
loadCamp()
loadTown()
loadCountry()
});
let lastFilterFormerly;
let lastFilterBfpo;
let lastFilterCamp;
let lastFilterTown;
let lastFilterCountry;
function filter(formerly, bfpo, camp, town, country) {
if (lastFilterFormerly !== formerly || lastFilterBfpo !== bfpo || lastFilterCamp !== camp || lastFilterTown !== town || lastFilterCountry !== country) {
let newFilter = wixData.filter();
if (formerly) {
newFilter = newFilter.contains("formerly", formerly)
}
if (bfpo) {
newFilter = newFilter.contains("bfpo", bfpo)
}
if (camp) {
newFilter = newFilter.contains("camp", camp)
}
if (town) {
newFilter = newFilter.contains("town", town)
}
if (country) {
newFilter = newFilter.contains("country", country)
}
$w("#dataset1").setFilter(newFilter);
lastFilterFormerly = formerly;
lastFilterBfpo = bfpo;
lastFilterCamp = camp;
lastFilterTown = town;
lastFilterCountry = country;
}
}
function loadBfpo() {
wixData.query("Locations").limit(1000).ascending("bfpo").distinct("bfpo").then((results) => {
let distinctList = results.items.map(element => { return { label: element, value: element }; })
distinctList.unshift({ "value": "", "label": "All" })
$w("#bfpo").options = distinctList
})
}
function loadCamp() {
wixData.query("Locations").limit(1000).ascending("camp").distinct("camp").then((results) => {
let distinctList = results.items.map(element => { return { label: element, value: element }; })
distinctList.unshift({ "value": "", "label": "All" })
$w("#camp").options = distinctList
})
}
function loadTown() {
wixData.query("Locations").limit(1000).ascending("town").distinct("town").then((results) => {
let distinctList = results.items.map(element => { return { label: element, value: element }; })
distinctList.unshift({ "value": "", "label": "All" })
$w("#town").options = distinctList
})
}
function loadCountry() {
wixData.query("Locations").limit(1000).ascending("country").distinct("country").then((results) => {
let distinctList = results.items.map(element => { return { label: element, value: element }; })
distinctList.unshift({ "value": "", "label": "All" })
$w("#country").options = distinctList
})
}
let onTime;
export function name_keyPress(event) {
if (onTime) {
clearTimeout(onTime)
onTime = undefined;
}
onTime = setTimeout(() => {
filter($w("#formerly").value, lastFilterBfpo, lastFilterCamp, lastFilterTown, lastFilterCountry)
}, 200)
}
export function bfpo_change(event) {
filter(lastFilterFormerly, $w("#bfpo").value, lastFilterCamp, lastFilterTown, lastFilterCountry);
}
export function camp_change(event) {
filter(lastFilterFormerly, lastFilterBfpo, $w("#camp").value, lastFilterTown, lastFilterCountry);
}
export function town_change(event) {
filter(lastFilterFormerly, lastFilterBfpo, lastFilterCamp, $w("#town").value, lastFilterCountry);
}
export function country_change(event) {
filter(lastFilterFormerly, lastFilterBfpo, lastFilterCamp, lastFilterTown, $w("#country").value);
}
export function buttonA_click() {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'a'))
}
export function buttonB_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'b'))
}
export function buttonC_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'c'))
}
export function buttonD_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'd'))
}
export function buttonE_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'e'))
}
export function buttonF_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'f'))
}
export function buttonG_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'g'))
}
export function buttonH_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'h'))
}
export function buttonI_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'i'))
}
export function buttonJ_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'j'))
}
export function buttonK_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'k'))
}
export function buttonL_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'l'))
}
export function buttonM_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'm'))
}
export function buttonN_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'n'))
}
export function buttonO_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'o'))
}
export function buttonP_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'p'))
}
export function buttonQ_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'q'))
}
export function buttonR_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'r'))
}
export function buttonS_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 's'))
}
export function buttonT_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 't'))
}
export function buttonU_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'u'))
}
export function buttonV_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'v'))
}
export function buttonW_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'w'))
}
export function buttonX_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'x'))
}
export function buttonY_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'y'))
}
export function buttonZ_click(event) {
$w("#dataset1").setFilter(wixData.filter().contains('az', 'z'))
}