Hello everyone!
I’ve been trying to create filtering drop downs on my website. However, they are not working properly as they should be. I’ve inserting some code as well onto the page code area.
For example, to check in, residents would first select which side of the complex they live on. Then that should filter out the apartment numbers, corresponding to the information inputted in the database.
However, the drop down selections not only not filter out residents based on what side they lived on, it also did not filter duplicate information, such as people who live in the same household (as shown in the screenshots provided below).
After residents select their apartment number, they then should be able to see a list of names of everyone who currently lives in their household and select their own name. The code that we implemented on our website is supposed to alter the drop downs so that it pulls information from a database we created, and project it onto the drop down clickables.
Additionally, I also get an error message saying “Publisher ‘’ failed with error: ‘Failed to fetch’ TypeError: Failed to fetch”.
Here are some screenshots on the website displaying the issue:
The current data that is on the website is all dummy-data, or pseudo-data, so no real information is made public.
The page where the issue is occurring is on the Check-In page, that can be found here:
https://sjprojectaccess.wixsite.com/website/check-in
Screenshot #1: https://ibb.co/VN5sFsZ
Screenshot #2: Screen-Shot-2019-04-16-at-8-09-46-PM hosted at ImgBB — ImgBB
Here is the current code we are using for our website:
import wixData from ‘wix-data’;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1(){
wixData.query(“Residents_Information”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#aptSide”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.aptSide);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function aptSide_change_1(event, $w) {
$w(“#aptNumber”).enable();
ApartmentSide();
}
function ApartmentSide (){
$w(“#dataset3”).setFilter( wixData.filter()
.eq(“aptSide”, $w(“#aptSide”).value)
);
}
function uniqueDropDown2(){
wixData.query(“Residents_Information”)
.contains(“aptNumber”, $w(“#aptSide”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#aptNumber”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.aptNumber);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function aptNumber_change_1(event, $w) {
$w(“#firstName”).enable();
ApartmentNumber();
}
function ApartmentNumber (){
$w(“#dataset4”).setFilter( wixData.filter()
.eq(“aptNumber”, $w(“#aptNumber”).value)
);
}
function uniqueDropDown3(){
wixData.query(“Residents_Information”)
.contains(“firstName”, $w(“#aptNumber”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#firstName”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.firstName);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function firstName_change_1(event, $w) {
$w(“#lastName”).enable();
Residents_Information();
}
function Residents_Information (){
$w(“#dataset2”).setFilter( wixData.filter()
.eq(“firstName”, $w(“#firstName”).value)
);
}
function uniqueDropDown4(){
wixData.query(“Residents_Information”)
.contains(“lastName”, $w(“#firstName”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#lastName”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.lastName);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function lastName_change_1(event, $w) {
$w(“#button1”).enable();
Residents_Information();
}
Thank you everyone for your time and help in advance!