Bonjour, Hi,
I speak better french if however someone would like to assist me. Otherwise here is my problem.
I’ve tried to follow step by step tutorials, and it seems to be working for the other persons, but not on my part. I tried two different codes :
First one
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
$w ( '#dropdownType' ). onChange (() => {
**const** selectedVal = $w ( '#dropdownType' ). value ;
**let** filter = wixData . filter ();
**if** ( selectedVal . length > 0 ) {
filter = filter . hasSome ( "typedhbergement" , selectedVal );
}
$w ( '#dataset2' ). setFilter ( filter );
})
Then the second one :
¸ import wixData from ‘wix-data’ ;
$w . onReady ( function () {
});
function filterResults ( type ){
**var** newFilter = wixData . filter ();
newFilter = newFilter . eq ( 'typedhbergement' , type );
$w ( "#dataset2" ). setFilter ( newFilter );
console . log ( newFilter );
}
export function dropdownType_change ( event ) {
filterResults ( $w ( "#dropdownType" ). value );
}
The first one works A LITTLE, I mean… When choosing an option in the dropdown, it removes my repeater instead of showing the element for the value choosen in the dropdown (Luxe, Rustique, Camping)
The second one doesnt work at all. Im lost. I tried to work with two different database. One with all my categories in case i’d like to add some with time (luxe rustique camping) and the other one with all the details of the place all of them combined : all the luxe places, all the rustique and camping places as well)
So I tried to associate the dropdown to either one of them databse, doesnt work too, Can somebody help me to make this work ? I want the client to choose what kind of places he wants and see the result in the repeater after. Thanks.
If you want to learn how to generate a really good DropDown function, read the following post…
https://www.wix.com/velo/forum/coding-with-velo/radio-button-and-values-2
Thank you so much, I will read and try it
I’d recommend you try the following code:
import wixData from 'wix-data';
$w.onReady(function () {
$w('#dropdownType').onChange((event) => {
const selectedVal = event.target.value;
let filter = wixData.filter();
if (selectedVal.length > 0) {
filter = filter.hasSome("typedhbergement", selectedVal);
}
$w('#dataset2').setFilter(filter);
})
If the issue persists, check the following:
-
if typedhbergement is the correct field key in the collection
-
Try using .contains or .eq instead of hasSome function, depending on your needs.
-
If the issue happens on the live site only, check collection permissions
I use a similar approach on my own site on the examples page.
Just to let you know that it works fine with the following code :
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
$w ( '#dropdownType' ). onChange (( event ) => {
const selectedVal = $w ( '#dropdownType' ). value ;
let filter = wixData . filter ();
if ( selectedVal . length > 0 ) {
filter = filter . hasSome ( "typedhbergement" , selectedVal );
}
$w ( '#dataset2' ). setFilter ( filter );
wixData . filter ()
. eq ( 'Luxueux' , "Luxueux" )
. eq ( 'Camping' , "Camping" )
. eq ( 'Rustique' , "Rustique" )
})
Thank to all of you, your forums and youtube videos help me so much.
The only things is that when choosing the first filter, then the second… It doesn’t keep the first filter choice, it gives all the choice from the second filtrer.
Exemple :
I choose in the first filter Québec + in the second filter Luxe = it gives me all Luxe places, not only in Québec
If I just choose the first filter and then Québec, I do have access only to the quebec places.
Is there somone to guide me a little more ? Thanks.
Here is my code
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
$w ( '#dropdownType' ). onChange (( event ) => {
**const** selectedVal = $w ( '#dropdownType' ). value ;
**let** filter = wixData . filter ();
**if** ( selectedVal . length > 0 ) {
filter = filter . hasSome ( "typedhbergement" , selectedVal );
}
$w ( '#dataset2' ). setFilter ( filter );
wixData . filter ()
. eq ( 'Luxueux' , "Luxueux" )
. eq ( 'Camping' , "Camping" )
. eq ( 'Rustique' , "Rustique" )
})
$w ( '#dropdownLieu' ). onChange (( event ) => {
**const** selectedVal = $w ( '#dropdownLieu' ). value ;
**let** filter = wixData . filter ();
**if** ( selectedVal . length > 0 ) {
filter = filter . hasSome ( "region" , selectedVal );
}
$w ( '#dataset2' ). setFilter ( filter );
wixData . filter ()
. eq ( 'Québec' , "Québec" )
. eq ( 'Mauricie' , "Mauricie" )
. eq ( 'Charlevoix' , "Charlevoix" )
. eq ( 'Laurentides' , "Laurentides" )
. eq ( "Cantons de l'Est" , "Cantons de l'Est" )
. eq ( 'Saguenay' , "Saguenay" )
})
Wow thanks so much for your help, really helpful.
I have trouble now to keep the choice on the first filter when making the choice for the second filter.
When I choose Quebec then Luxe, it gives me all the luxe places, not in Quebec.
But the filter Location works fine, cause if I choose quebec, I see all the quebec places. But the two filters doesnt seem to work together. Do you have an advice for me ?
The code is in my last comment, if you filter bu newest.
Thanks
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
$w ( '#dropdownLieu' ). onChange (( event ) => {
const selectedVal = $w ( '#dropdownLieu' ). value ;
let filter = wixData . filter ();
if ( selectedVal . length > 0 ) {
filter = filter . hasSome ( "region" , selectedVal );
}
$w ( '#dataset2' ). setFilter ( filter );
wixData . filter ()
. eq ( 'Québec' , "Québec" )
. eq ( 'Mauricie' , "Mauricie" )
. eq ( 'Charlevoix' , "Charlevoix" )
. eq ( 'Laurentides' , "Laurentides" )
. eq ( "Cantons de l'Est" , "Cantons de l'Est" )
. eq ( 'Saguenay' , "Saguenay" )
})
$w ( '#dropdownType' ). onChange (( event ) => {
const selectedVal = $w ( '#dropdownType' ). value + $w ( '#dropdownLieu' ). value ;
let filter = wixData . filter ();
if ( selectedVal . length > 0 ) {
filter = filter . hasSome ( "typedhbergement" , selectedVal );
}
$w ( '#dataset2' ). setFilter ( filter );
wixData . filter ()
. contains ( "region" , $w ( "#dropdownLieu" ). value )
. eq ( 'Luxueux' , "Luxueux" )
. eq ( 'Camping' , "Camping" )
. eq ( 'Rustique' , "Rustique" )
When i added the pink code, the repeater doesnt show anything
