Recently there was an issue on my website where some mobile users could not submit forms that involved uploading an image.
After a few weeks the Wix support team provided a workaround which solved this issue. I was not provided any details of what exactly the workaround involved.
Now my filters & conditional dropdowns with code execution are no longer working (in preview or live site), and I am receiving multiple errors in consoleLog of the live site.
I have re-written the page code letter-by-letter and re-activated all the event listeners again to ensure connectivity, however my conditional dropdowns simply will not populate, nor do they fire the appropriate event listener.
I have included my code below. Can anyone see any obvious errors in my code that could be causing the issues. I am yet to hear back from Wix but suspect they will not be able to provide support on this due to the volume of customisation I have.
import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;
import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-Window’ ;
let debounceTimer
$w.onReady( function () {
$w( "#dbJobListings" ).onReady( () => {
console.log( "data Ready" );
preparePage();
populateIndustry();
});
});
//Prepare page Job Listings for use, populate dropdowns & filters
function preparePage(){
$w( “#iptSort” ).value = “Newest First” ;
$w( “#iptType” ).value = “All Types” ;
$w( “#iptKeyword” ).value = “” ;
//pupulate Industry dropdown first
wixData.query( “Industry” )
.limit( 1000 )
.find()
.then(results => {
var uniqueList = createUniqueIndustryList(results.items).map(curr => { return {label:curr, value:curr}; });
uniqueList.unshift({ “label” : “All Industries” , “value” : “All Industries” });
$w( “#iptIndustry” ).options = uniqueList;
$w( “#iptIndustry” ).value = “All Industries” ;
//Populate the Trade Dropdown
wixData.query( “Industry” )
.limit( 1000 )
.find()
.then (results2 => {
var uniqueList2 = createUniqueTradeList(results2.items).map(curr => { return {label:curr, value:curr}; });
uniqueList2.unshift({ “label” : “All Trades” , “value” : “All Trades” });
$w( “#iptTrade” ).options = uniqueList2;
$w( “#iptTrade” ).value = “All Trades” ;
//Populate the Location dropdown
wixData.query( “Location” )
.limit( 1000 )
.find()
.then(results3 => {
var uniqueList3 = createUniqueStateList(results3.items).map(curr => { return {label:curr, value:curr}; });
uniqueList3.unshift({ “label” : “All States” , “value” : “All States” });
$w( “#iptState” ).options = uniqueList3;
$w( “#iptState” ).value = “All States” ;
//Populate Locations Dropdown
wixData.query( “Location” )
.limit( 1000 )
.find()
.then(results4 => {
var uniqueList4 = createUniqueLocationList(results4.items).map(curr => { return {label:curr, value:curr}; });
uniqueList4.unshift({ “label” : “All Locations” , “value” : “All Locations” });
$w( “#iptLocation” ).options = uniqueList4;
$w( “#iptLocation” ).value = “All Locations” ;
})
})
})
})
filterResults();
console.log( ‘Page Prepared’ )
}
function createUniqueIndustryList(items){
var titlesOnly = items.map(item => item.industry);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function createUniqueStateList(items){
var titlesOnly = items.map(item => item.state);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function createUniqueTradeList(items){
var titlesOnly = items.map(item => item.trade);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function createUniqueLocationList(items){
var titlesOnly = items.map(item => item.location);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function populateIndustry(){
wixData.query( “Industry” )
.limit( 1000 )
.find()
.then(results => {
var uniqueList = createUniqueList(results.items);
$w( “#iptIndustry” ).options = buildOptions(uniqueList);
})
function createUniqueList(items){
var titlesOnly = items.map(item => item.industry);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList){
var uniqueListFinal = uniqueList.map(curr => { return {label:curr, value:curr}; });
uniqueListFinal.unshift({ “label” : “All Industries” , “value” : “” });
return uniqueListFinal;
}
}
function populateTrade(){
wixData.query( “Industry” )
.limit( 1000 )
.eq( ‘industry’ ,$w( “#iptIndustry” ).value)
.find()
.then(results => {
var uniqueList = createUniqueList(results.items);
$w( “#iptTrade” ).options = buildOptions(uniqueList);
})
function createUniqueList(items){
var titlesOnly = items.map(item => item.trade);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList){
var uniqueListFinal = uniqueList.map(curr => { return {label:curr, value:curr}; });
uniqueListFinal.unshift({ “label” : “All Trades” , “value” : “” });
return uniqueListFinal;
}
}
function populateLocation(){
wixData.query( “Location” )
.limit( 1000 )
.eq( ‘state’ ,$w( “#iptState” ).value)
.find()
.then(results => {
var uniqueList = createUniqueList(results.items);
$w( “#iptLocation” ).options = buildOptions(uniqueList);
})
function createUniqueList(items){
var titlesOnly = items.map(item => item.location);
titlesOnly.sort();
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList){
var uniqueListFinal = uniqueList.map(curr => { return {label:curr, value:curr}; });
uniqueListFinal.unshift({ “label” : “All Locations” , “value” : “” });
return uniqueListFinal;
}
}
function filterResults(){
let today = new Date();
var newFilter = wixData.filter();
$w( "#dbJobListings" ).setFilter(newFilter)
newFilter = newFilter.ge( "expiry" , today);
$w( "#dbJobListings" ).setFilter(newFilter);
if ($w( “#iptIndustry” ).value !== “All Industries” ) {
newFilter = newFilter.eq( ‘industry’ , $w( “#iptIndustry” ).value);
}
if ($w( “#iptTrade” ).value !== “All Trades” ) {
newFilter = newFilter.eq( ‘trade’ , $w( “#iptTrade” ).value);
}
if ($w( “#iptState” ).value !== “All States” ) {
newFilter = newFilter.eq( ‘state’ , $w( “#iptState” ).value);
}
if ($w( “#iptLocation” ).value !== “All Locations” ) {
newFilter = newFilter.eq( ‘location’ , $w( “#iptLocation” ).value);
}
if ($w( “#iptType” ).value !== “All Types” ) {
newFilter = newFilter.eq( ‘type’ , $w( “#iptType” ).value);
}
if ($w( “#iptKeyword” ).value !== “” ) {
var jobTitleFilter = wixData.filter().contains( ‘jobTitle’ , $w( “#iptKeyword” ).value);
var aboutCompanyFilter = wixData.filter().contains( ‘aboutCompany’ , $w( “#iptKeyword” ).value);
var weNeedFilter = wixData.filter().contains( ‘weNeed’ , $w( “#iptKeyword” ).value);
var weOfferFilter = wixData.filter().contains( ‘weOffer’ , $w( “#iptKeyword” ).value);
var newKeywordFilter = jobTitleFilter.or(aboutCompanyFilter).or(weNeedFilter).or(weOfferFilter);
newFilter = newFilter.and(newKeywordFilter);
}
}
export function iptIndustry_change(event) {
populateTrade();
filterResults();
$w( “#iptTrade” ).enable();
}
export function iptTrade_change(event) {
filterResults();
}
export function iptState_change(event) {
populateLocation();
filterResults();
$w( “#iptLocation” ).enable();
}
export function iptLocation_change(event) {
filterResults();
}
export function iptType_change(event) {
filterResults();
}
export function iptKeyword_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
const jobTitleFilter = wixData.filter().contains( ‘jobTitle’ , $w( “#iptKeyword” ).value);
const aboutCompanyFilter = wixData.filter().contains( ‘aboutCompany’ , $w( “#iptKeyword” ).value);
const weNeedFilter = wixData.filter().contains( ‘weNeed’ , $w( “#iptKeyword” ).value);
const weOfferFilter = wixData.filter().contains( ‘weOffer’ , $w( “#iptKeyword” ).value);
const newKeywordFilter = jobTitleFilter.or(aboutCompanyFilter).or(weNeedFilter).or(weOfferFilter);
console.log(newKeywordFilter);
$w( “#dbJobListings” ).setFilter(newKeywordFilter);
}, 500 );
}
export function iptSort_change(event) {
if ($w( “#iptSort” ).value === “Newest First” ) {
$w( “#dbJobListings” ).setSort(wixData.sort()
.descending( ‘_createdDate’ ));
} else if ($w( “#iptSort” ).value === “Oldest First” ) {
$w( “#dbJobListings” ).setSort(wixData.sort()
.ascending( ‘_createdDate’ ));
} else {
wixData.sort().descending( ‘_createdDate’ )
$w( “#dbJobListings” ).setSort(wixData.sort()
.descending( ‘_createdDate’ ));
}
}
export function btnReset_click(event) {
preparePage();
}