Hi,
Firstly I should apologise, I have no experience of coding so I am struggling with the basics.
I have followed a youtube presentation on how to create a search on a database. I have created the database, I have linked a gallery to the database, I have added a text filed that can search the database and update the gallery. I have added a dropdown list which can also be used to filter the gallery. So far so good.
However I can’t populate the dropdown list from the database (adding an All Options).
The bit of code in questions is as follows;
$w.onReady(()=>{
wixData.query(‘ItsaDogsLife’)
.find()
.then(res => {
let options = [{“value”: ‘’,‘label’: ‘All Boroughs’}];
options.push(…res.items.map(borough => {
return {‘value’: borough.title,‘label’: borough.title};
}));
$w(“#iBorough”).options = options;
})
});
ItsaDogsLife is the name of the database
borough is the field I am seaching on / would like to populate the dropdown list with
iBorough is the dropdown list
Any help would be appreciated
It’s line 11 that might be causing the problem;
$w(" #iBorough ").options = options;
But I don’t know why
I think I might have worked this out. I was trying to use a single collection, with a column/field called Boroughs. Creating a second collection of just the boroughs allows me to populate the dropdown lis
So I wanted to thank you for posting this question and your solution. I did what you had done by making a separate collection (regions in my case). However, the dropdown menu did not populate until I also filled the “title” column with the region names. So in my case, for the second collection, I had two categories [ Title , Region ] with the same entry for both of the categories. Any idea why this is the case? Is this what you did as well?
Hello heple005,
do you really need to populate your DropDown by CODE ?
Populating a dropdown list from a database
I mean there is also a possibiliity to populate it WITHOUT ANY CODE.
Hello russian-dima. I would like it to be auto-populated from a dataset as the entries will change and expand from time to time.
I’ve actually made a lot of headway on this issue where my dropdown is now populating correctly, and my search bar is filtering correctly. However, I’ve found that my “change” event for the dropdown is never being called, and I cannot understand why this is the case. I’ve included my code below:
import wixData from ‘wix-data’ ;
$w.onReady(() => {
wixData.query( ‘Regions’ )
.find()
.then(res => {
let options = [{ “value” : ‘’ , ‘label’ : ‘All Regions’ }];
options.push(…res.items.map(regions =>{
return { ‘value’ : regions.regions, ‘label’ : regions.regions};
}));
$w( ‘#iRegion’ ).options = options;
})
});
// Set some indefined variables that will hold the company and region search ()
let lastFilterConame;
let lastFilterRegion;
let debounceTimer;
export function iConame_keyPress(event, $w) {
if (debounceTimer){
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#iConame’ ).value, lastFilterRegion);
}, 200 );
}
function filter(Coname, regionhq){
if (lastFilterConame !== Coname || lastFilterRegion !== regionhq){
let newFilter = wixData.filter();
if (Coname)
//newFilter = newFilter.contains(‘coname’, coname);
newFilter = newFilter.contains( ‘companyName’ , Coname);
if (regionhq)
//newFilter = newFilter.eq(‘region’, region);
newFilter = newFilter.eq( ‘region’ , regionhq);
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFilterConame = Coname;
lastFilterRegion = regionhq;
console.log( 'lastFilterRegion: ’ )
console.log(lastFilterRegion)
}
}
export function iRegion_change(event, $w) {
filter(lastFilterConame, $w( ‘#iRegion’ ).value);
//console.log($w(‘#iRegion’).value);
}
Ok, wow. I found a solution, but I’m unsure why it was originally broken. Essentially, I had my dropdown set up with " iRegion_change(event, $w) " in my code. For some reason this section of code was not being called when a change was made. However, I went into the user interface on the editor, and added a new change event calling it
"iRegion_change1(event, $w) " and copying the contents. Now it works just fine.
I can only guess that the iRegion_change(event, $w) somehow was not valid any longer, or somehow never got initiated, or something like that. Any insight on this issue? Is there a reason that an event command might stop working? Do you always have to add events through the user interface?
I have found that the properties panel is not reliable 100% of the time. So if you DID configure the properties panel for the onChange event of that dropdown, and then later disapeared … I cannot explain why other than it happens sometimes.
To answer your question: You can modify your code with the correct syntax in the onReady without needing to trigger events from the properties panel.
I was also searching for an error and wanted you suggest to check the connection between the button and the code, but already found the solution.
As queen Nayeli, already mentioned, there are 2-ways on how to call an event.
EXTERN and INTERN from the onReady.
Thaaaannnnkkkk you! Yeah, to be honest, all of the effort to make it user-friendly doesn’t appeal to me. The coded onChange function is perfect for future work.
As a simple example, when I want an onChange event to, say, print the dropdown value in my log, is the following syntax correct?
$w( “#iRegion” ).onChange( (event) => {
console.log( 'onChange-Activated: ’ )
console.log($w( ‘#iRegion’ ).value)
// let newValue = event.target.value; // “new value”
});
What is “newValue” doing here? If I just want to print the value, do I need to save the value as “newValue” and then call that, or can I just directly call it using $w(‘#iRegion’).value ?
You can do it in both ways.
- directly:
console.log($w('#iRegion').value)
- indirect:
let myNewValue = $w('#iRegion').value
console.log(myNewValue)
Hi,
I have no experience of coding so I am struggling with the basics.
I can’t populate the dropdown list from the database (adding an All Options).
The bit of code in questions is as follows;
import wixData from ‘wix-data’ ;
$w.onReady( function () {
// TODO: write your page related code here…
wixData.query( ‘Enter Contest’ )
.find()
.then(res => {
let options = [{ “value” : ‘’ , ‘label’ : ‘Email’ }];
$w( ‘#dropdown1’ ).options = options;
})
});
Enter Contest is the name of the database
would like to populate the dropdown list with
dropdown1 in the dropdown list
Please help.