Hi everybody,
I am - time and again - facing the following issue:
On page ready, I want to fill the options of a series of dropdown element on my page. For this, I have a combination of F/E and B/E (for all collection queries) functions that, while in developer mode, work appropriately, but on the live site the relevant arrays generated in the B/E are not recognized (console message: “arr is undefined”):
To better understand the code, here are the basic logical steps, if needed:
Step 0) call back end function from the front end (steps 1) to 4) ), “on ready”, by indicating the chosen language of the page, then (step 5) ) allocate arrays to dropdown elements identified by “keys” in dropdown collection
Step 1) in the back end, get a list of dropdown elements (per “#…” key) to be populated (“DropdownElements” collection only holds a list of “$w(”#…“)” references to be run through,
Step 2) per dropdown element, get those items for which there is currently an event and get _ids from a “source collection”,
Step 3) get the corresponding values from a reference collection containing the list of labels corresponding to the _ids, depending on the language chosen
Step 4) deliver array of eligible dropdown label/value pairs to front end and fill the corresponding dropdown options
Can somebody please help with this? It is pretty urgent, as this is a service to Ukrainian refugees in our area …
THANK YOU SO MUCH FOR YOUR SUPPORT!
There is a unfinished desktop version live (www.lachen-hilft.ch), where the missing dropdown options become visible (and as a result, some other functions do not work)
Here is a (a bit shortened version of) the code:
// F/E: call function "load content" on ready, calling up, a.o. the "initialDropDowns (language)" F/E function
$w.onReady(function () {
let language = $w('#language').text
loadContent(language)
});
// load initial page content, a.o., call function to load dropdown options
export function loadContent(language) {
staticElements(language)
loadNavigation(language)
initialDropDowns(language)
initialPlaceholders(language)
isLoaded();
loadLesenswertes(language, pageInitial)
$w('#lesenswertesPageCur').text = pageInitial.toString( )
$w('#lesenswertesPagePrev').disable()
events(language, pageInitial, tlnInitial, katInitial, gemInitial)
$w('#eventsPageCur').text = pageInitial.toString( )
$w('#eventsPagePrev').disable()
collapseAll();
$w("#anchorIntro").scrollTo()
}
// F/E function calling the relevant B/E loadDropDowns(language) function
async function initialDropDowns(language) {
const arr = await loadDropDowns(language);
loadDropDowns(language).then((response) => {
const arr = response
if(arr != undefined){
if (arr.length > 0) {
for (let i = 0; i < arr.length; i++) {
let items = []
let target = arr[i][0].key
for (let j = 1; j < arr[i].length; j++) {
const elementLabel = arr[i][j].label;
const elementValue = arr[i][j].value;
items.push({label: elementLabel, value: elementValue})
}
$w(target).options = items
$w(target).value = undefined
$w(target).placeholder = arr[i][1].label
}
}
}
});
}
//B/E function to query relevant collections
export async function loadDropDowns(language){
// step 1)
let db = "DropdownElements"
try{
const data = await wixData.query(db)
.eq("enabledDefault", true)
.find()
const result = await data.items
// step 2)
if (result.length > 0) {
let arr = []
for (let i = 0; i < result.length; i++) {
let sourceCollection = result[i].sourceCollection.toString()
let sourceField = result[i].sourceField.toString()
let referenceCollection = result[i].referenceCollection.toString()
let referenceField = (language + result[i].referenceField.toString())
const results = await wixData.query(sourceCollection)
.include(sourceField)
.distinct(sourceField)
const output = await results.items
// step 3)
if (output.length > 0) {
if (referenceCollection === "Gemeinden"){
const response = await wixData.query(referenceCollection)
.hasSome("_id", output)
.ascending(referenceField)
.find()
const keys = await response.items
if (keys.length > 0) {
arr[i] = []
arr[i].push({"key": result[i].key})
// differentiate by language, push first "all" option into the array, then the relevant value/label pairs
if (language === "") {
if (result[i].selectedIndexDefault != 1){
arr[i].push({
"value": undefined,
"label": result[i].text
})
}
for (let j = 0; j < keys.length; j++) {
arr[i].push({
"value": keys[j]._id,
"label": keys[j].gemeinde
})
}
}
else if (language === "u_") {
if (result[i].selectedIndexDefault != 1){
arr[i].push({
"value": undefined,
"label": result[i].u_text
})
}
for (let j = 0; j < keys.length; j++) {
arr[i].push({
"value": keys[j]._id,
"label": keys[j].u_gemeinde
})
}
}
else if (language === "r_") {
if (result[i].selectedIndexDefault != 1){
arr[i].push({
"value": undefined,
"label": result[i].r_text
})
}
for (let j = 0; j < keys.length; j++) {
arr[i].push({
"value": keys[j]._id,
"label": keys[j].r_gemeinde
})
}
}
}
}
// alternatives to above reference collection "Gemeinde", depending on reference collection type (same code as above, just different field names)
// else if (...){...}
// else if (...){...}
}
}
return arr
}
}
catch(error) {console.log(error)
}
}
- virtually, as many as your screen resolution can cope with, unless you tell me, where you are located and I will offer you a couple of them, next time I’ll come over