Second Dropdown ignores first one

Ask the community
,
1

Hello Community,

first of all, thank you very much for your input, I have learned so much on this platform it is incredible.
I have/had absoluteley no knowledge of coding hence my decision to use WIX for my website and thanks to Corvid I could even learn a bit of coding.

I am facing this issue which I found actually a lot of times here but I never managed to make the answers work on my own code.
So I thought maybe I post my code here and someone can help me.

Situation:

I have a database with items. These items have two values. Colour and Fabric. (Dont be confused, the fiedkey for my fabrics is “price”. Was an accident :D)

The database is displayed via repeater.
I have two dropdown menues with each the values.

Now the problem. It does not matter which dropdown menu I use first, the repeater is successfully displaying me the filtered results.
But then I use the second dropdown to “filter it even more” it just disregards the first filter and just shows me all items which suit to the second filter.

How can I do it, that the second or maybe future third and forth dropdown filter always “refines” the current search, therefore “puts another filter on top” rather then acting alone and disregarding the other filters.

I hope someone can help me and tell me exactly where I need to add which code. As mentioned, I just started learning code so please explain so I can understand you :slight_smile:

Thanks in advance!

Here my code:

import wixData from ‘wix-data’ ;

$w.onReady( function () {

});

export function dropdown1_change(event, $w) {

$w( "#dynamicDataset" ).setFilter(wixData.filter() 

.contains( "colour" , $w( '#dropdown1' ).value)) 
.then((results) => { 
$w( "#listRepeater" ).data = results.items; 
});

$w( “#listRepeater” ).expand();

let colourFilter = $w( ‘#dropdown1’ ).value;
if (colourFilter === “Any” ){
$w( ‘#dynamicDataset’ ).setFilter(wixData.filter());
}
}

export function dropdown2_change(event, $w) {

$w( "#dynamicDataset" ).setFilter(wixData.filter() 

.contains( "price" , $w( '#dropdown2' ).value)) 
.then((results) => { 
$w( "#listRepeater" ).data = results.items; 
});

$w( “#listRepeater” ).expand();

let fabricFilter = $w( ‘#dropdown2’ ).value;
if (fabricFilter === “Any” ){
$w( ‘#dynamicDataset’ ).setFilter(wixData.filter());
}
}

2

Hello Danny,

take a look at----> how to set multiple filter here …

https://russian-dima.wixsite.com/meinewebsite/blank-3

And take a look at this one, how to fill your repeater with new results…

https://russian-dima.wixsite.com/meinewebsite/repeater-dropdown

Here the code for it…

import wixData from 'wix-data';

$w.onReady(function () {

    load_Data()

});

function load_Data (parameter) {console.log("GO")
    wixData.query("Companies")
    .contains("companyGroup", $w('#dropdown1').value)
    .find()
    .then( (results) => {
 if(results.items.length > 0) {
 let firstItem = results.items[0]; //see item below

        console.log(results.items)
        $w('#repeater1').data = results.items


        $w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item("#pic").src = itemData.logo;
        $item("#ID").text = itemData.title;
        $item("#group").text = itemData.companyGroup;
        $item("#title").text = itemData.companyName;
        $item("#image1").onClick( (event) => {
 
        } );
    } );

        } else {
 // handle case where no matching items found
        }
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );
}
3

Thank you for your answer but I dont understand how I can add this to my code to work. Please help

4 
import wixData from 'wix-data';
 
$w.onReady( () => {
    $w("#dataset1").onReady( () => {   
       
//Here you will have to insert, events which will start FILTER.
 
    } );
} );

 function start_Filter () {
  let filter =  wixData.filter()
  let myDataset = "HereTheIDofYourDATASET"
  let myFILTER1 = $w('#dropdown1').value
  let myFILTER2 = $w('#dropdown2').value
  const myCOLUMN1 = "HereYourFirstColumnID"
  const myCOLUMN2 = "HereYourSecondColumnID"
  
 if (myFILTER1!=0) {filter = filter.contains(myCOLUMN1, myFILTER1);}
 if (myFILTER2!=0) {filter = filter.eq(myCOLUMN2, myFILTER2);}
    console.log(filter)
    $w('#'+myDataset).setFilter(filter)        
}
5

@russian-dima

I inserted your code into mine. No errors but I have the same issue. Nothing has changed. What did I do wrong?

Here my full code:

import wixData from ‘wix-data’ ;

$w.onReady( function () {
$w( “#dynamicDataset” ).onReady( () => {

} );

});

function start_Filter () {
let filter = wixData.filter()
let myDataset = “dynamicDataset”
let myFILTER1 = $w( ‘#dropdown1’ ).value
let myFILTER2 = $w( ‘#dropdown2’ ).value
const myCOLUMN1 = “colour”
const myCOLUMN2 = “price”

if (myFILTER1!== 0 ) {filter = filter.contains(myCOLUMN1, myFILTER1);}
if (myFILTER2!== 0 ) {filter = filter.eq(myCOLUMN2, myFILTER2);}
console.log(filter)
$w( ‘#dynamicDataset’ ).setFilter(filter)
}

export function dropdown1_change(event, $w) {

$w( "#dynamicDataset" ).setFilter(wixData.filter() 

.contains( "colour" , $w( '#dropdown1' ).value)) 
.then((results) => { 
$w( "#listRepeater" ).data = results.items; 
});

$w( “#listRepeater” ).expand();

let colourFilter = $w( ‘#dropdown1’ ).value;
if (colourFilter === “Any” ){
$w( ‘#dynamicDataset’ ).setFilter(wixData.filter());
}
}

export function dropdown2_change(event, $w) {

$w( "#dynamicDataset" ).setFilter(wixData.filter() 

.contains( "price" , $w( '#dropdown2' ).value)) 
.then((results) => { 
$w( "#listRepeater" ).data = results.items; 
});

$w( “#listRepeater” ).expand();

let fabricFilter = $w( ‘#dropdown2’ ).value;
if (fabricFilter === “Any” ){
$w( ‘#dynamicDataset’ ).setFilter(wixData.filter());
}
}

6

@danny0510
PLEASE use CODE-TAGS ---->

$w.onReady(function () {   });

 function start_Filter () {
 let filter =  wixData.filter()
 let myDataset = "dynamicDataset"
 let myFILTER1 = $w('#dropdown1').value
 let myFILTER2 = $w('#dropdown2').value
 const myCOLUMN1 = "colour"
 const myCOLUMN2 = "price"
 
 if (myFILTER1!==0) {filter = filter.contains(myCOLUMN1, myFILTER1);}
 if (myFILTER2!==0) {filter = filter.eq(myCOLUMN2, myFILTER2);}
    console.log(filter)
    $w('#dynamicDataset').setFilter(filter)        
}

export function dropdown1_change(event, $w) {

    $w("#dynamicDataset").setFilter(wixData.filter()

    .contains("colour", $w('#dropdown1').value))
    .then((results) => {
    $w("#listRepeater").data = results.items;
    });
$w("#listRepeater").expand();

 let colourFilter = $w('#dropdown1').value;
 if (colourFilter === "Any"){ 
         $w('#dynamicDataset').setFilter(wixData.filter());
   } 
 }


export function dropdown2_change(event, $w) {

    $w("#dynamicDataset").setFilter(wixData.filter()
 
    .contains("price", $w('#dropdown2').value))
    .then((results) => {
    $w("#listRepeater").data = results.items;
    });
$w("#listRepeater").expand();

 let fabricFilter = $w('#dropdown2').value;
 if (fabricFilter === "Any"){ 
         $w('#dynamicDataset').setFilter(wixData.filter());
   } 
}

After modifiying your code, your code should look something like this…

$w.onReady(function () {
 // TODO: write your page related code here...

});

export function dropdown1_change(event, $w) {start_Filter ()}
export function dropdown2_change(event, $w) {start_Filter ()}

 function start_Filter () {
 let filter =  wixData.filter()
 let DATASET = "#dynamicDataset"
 let REPEATER = "#listRepeater"
 let myFILTER1 = $w('#dropdown1').value
 let myFILTER2 = $w('#dropdown2').value
 const myCOLUMN1 = "colour"
 const myCOLUMN2 = "price"
 
 if (myFILTER1!==0) {filter = filter.contains(myCOLUMN1, myFILTER1);}
 if (myFILTER2!==0) {filter = filter.contains(myCOLUMN2, myFILTER2);}
    console.log(filter)
    $w(DATASET)
    .setFilter(filter)        
    .then((results) => {
        $w(REPEATER).data = results.items;
    });
}

This is all you need!
I have not tested it, so it could be, that you will find some errors when testing it.
Keep your eyes open and try to use console, to debug the code, if it has some errors.