Problem with multiple dropdown

[fabricemontandon]

Hi,

I created multiple dropdown to filter a database.

When I select one think in one dropdown I recalculate the others dropdown.

It’s work perfectly for all except in one case.

When I select a “Organisme” or a “Titre” the dropdown of “Canton” didn’t filtered. It stay 5 cantons all of the time. I don’t know why! Because when I select a “Nbr personne” or a “lieu” it’s working.

Somebody can help me?

This is the link of my editor site: https://editor.wix.com/html/editor/web/renderer/edit/bc379026-0c01-4f2b-868a-4fe2339e269e?metaSiteId=1229d75a-0a03-4fcb-81a1-9f679b24ff90&editorSessionId=a2fa06f5-9e33-489c-9a8f-f8a8e7162fdf

and this is my code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from "wix-data";

let lastFilterOrganisme;
let lastFilterLieu;
let lastFilterCanton;
let lastFilterTitre;
let lastFilterNbPers;
let NEW;

$w.onReady(() => {
 //Set up the Organisme dropdown
    dropdownOrganisme()
    $w('#iOrganisme').value = "";
 //Set up the Lieux dropdown
    dropdownLieux()
    $w('#iLieu').value = "";
 //Set up the Canton dropdown
    dropdownCanton()
    $w('#iCanton').value = "";
 //Set up the Titre dropdown
    dropdownTitre()
    $w('#iTitre').value = "";
 //Set up the NbPers dropdown
    dropdownNbPers()
    NEW = "OUI";
 //Filtre les données
    filter()

});

//Function for options of the Organisme dropdown
function dropdownOrganisme() {
    $w('#iOrganisme').disable()
 if (Number($w('#iNbPers').value) === 0) {
        wixData.query('Autres_Escapes_Organisme')
            .contains('lieu1', $w('#iLieu').value)
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu2', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu3', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu4', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu5', $w('#iLieu').value))
            .contains('canton1', $w('#iCanton').value)
            .or(wixData.query('Autres_Escapes_Organisme').contains('canton2', $w('#iCanton').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('canton3', $w('#iCanton').value))
            .ascending("title")
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Tous les Organismes'
                }];
                options.push(...res.items.map(organisme => {
                    console.log(organisme.title)
 return {
 'value': organisme._id,
 'label': organisme.title
                    };
                }));
                $w('#iOrganisme').options = options;
            });
    } else {
        wixData.query('Autres_Escapes_Organisme')
            .contains('lieu1', $w('#iLieu').value)
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu2', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu3', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu4', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('lieu5', $w('#iLieu').value))
            .contains('canton1', $w('#iCanton').value)
            .or(wixData.query('Autres_Escapes_Organisme').contains('canton2', $w('#iCanton').value))
            .or(wixData.query('Autres_Escapes_Organisme').contains('canton3', $w('#iCanton').value))
            .le('nbPersMin', Number($w('#iNbPers').value))
            .ge('nbPersMax', Number($w('#iNbPers').value))
            .ascending("title")
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Tous les Organismes'
                }];
                options.push(...res.items.map(organisme => {
 return {
 'value': organisme._id,
 'label': organisme.title
                    };
                }));
                $w('#iOrganisme').options = options;
            });
    }
    $w('#iOrganisme').enable()
}

//Function for options of the Lieux dropdown
function dropdownLieux() {
    $w('#iLieu').disable()
 if (Number($w('#iNbPers').value) === 0) {
        wixData.query('Autres_Escapes_Lieu')
            .contains('orga1', $w('#iOrganisme').value)
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga2', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga3', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga4', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga5', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga6', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga7', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga8', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga9', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga10', $w('#iOrganisme').value))
            .contains('canton', $w('#iCanton').value)
            .ascending("title")
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Tous les Lieux'
                }];
                options.push(...res.items.map(lieu => {
 return {
 'value': lieu._id,
 'label': lieu.title
                    };
                }));
                $w('#iLieu').options = options;
            });
    } else {
        wixData.query('Autres_Escapes_Lieu')
            .contains('orga1', $w('#iOrganisme').value)
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga2', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga3', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga4', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga5', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga6', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga7', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga8', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga9', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Lieu').contains('orga10', $w('#iOrganisme').value))
            .contains('canton', $w('#iCanton').value)
            .le('nbPersMin', Number($w('#iNbPers').value))
            .ge('nbPersMax', Number($w('#iNbPers').value))
            .ascending("title")
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Tous les Lieux'
                }];
                options.push(...res.items.map(lieux => {
 return {
 'value': lieux._id,
 'label': lieux.title
                    };
                }));
                $w('#iLieu').options = options;
            });
    }
    $w('#iLieu').enable()
}

//Function for options of the Canton dropdown
function dropdownCanton() {
    $w('#iCanton').disable()
 if (Number($w('#iNbPers').value) === 0) {
        wixData.query('Autres_Escapes_Canton')
            .contains('orga1', $w('#iOrganisme').value)
            .or(wixData.query('Autres_Escapes_Canton').contains('orga2', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga3', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga4', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga5', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga6', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga7', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga8', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga9', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga10', $w('#iOrganisme').value))
            .contains('lieu1', $w('#iLieu').value)
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu2', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu3', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu4', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu5', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu6', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu7', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu8', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu9', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu10', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu11', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu12', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu13', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu14', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu15', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu16', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu17', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu18', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu19', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu20', $w('#iLieu').value))
            .ascending('title')
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Tous les Cantons'
                }];
                options.push(...res.items.map(canton => {
 return {
 "value": canton._id,
 'label': canton.title
                    };
 
                }));
                $w('#iCanton').options = options;
            });
    } else {
        wixData.query('Autres_Escapes_Canton')
            .contains('orga1', $w('#iOrganisme').value)
            .or(wixData.query('Autres_Escapes_Canton').contains('orga2', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga3', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga4', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga5', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga6', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga7', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga8', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga9', $w('#iOrganisme').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('orga10', $w('#iOrganisme').value))
            .contains('lieu1', $w('#iLieu').value)
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu2', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu3', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu4', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu5', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu6', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu7', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu8', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu9', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu10', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu11', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu12', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu13', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu14', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu15', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu16', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu17', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu18', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu19', $w('#iLieu').value))
            .or(wixData.query('Autres_Escapes_Canton').contains('lieu20', $w('#iLieu').value))
            .le('nbPersMin', Number($w('#iNbPers').value))
            .ge('nbPersMax', Number($w('#iNbPers').value))
            .ascending('title')
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Tous les Cantons'
                }];
                options.push(...res.items.map(canton => {
 return {
 "value": canton._id,
 'label': canton.title
                    };
                }));
                $w('#iCanton').options = options;
            });
    }
    $w('#iCanton').enable()

}

//Function for options of the Titre dropdown
function dropdownTitre() {
    $w('#iTitre').disable()
 if (Number($w('#iNbPers').value) === 0) {
        wixData.query('Autres_Escapes')
            .contains('organisme', $w('#iOrganisme').value)
            .contains('lieu', $w('#iLieu').value)
            .contains('canton', $w('#iCanton').value)
            .ascending("title")
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Toutes les Escapes'
                }];
                options.push(...res.items.map(titre => {
 return {
 'value': titre.title,
 'label': titre.title
                    };
                }));
                $w('#iTitre').options = options;
            });
    } else {
        wixData.query('Autres_Escapes')
            .contains('organisme', $w('#iOrganisme').value)
            .contains('lieu', $w('#iLieu').value)
            .contains('canton', $w('#iCanton').value)
            .le('nbPersMin', Number($w('#iNbPers').value))
            .ge('nbPersoMax', Number($w('#iNbPers').value))
            .ascending("title")
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'Toutes les Escapes'
                }];
                options.push(...res.items.map(titre => {
 return {
 'value': titre.title,
 'label': titre.title
                    };
                }));
                $w('#iTitre').options = options;
            });
    }
    $w('#iTitre').enable()
}

//Function for options of the NbPers dropdown
function dropdownNbPers() {
    wixData.query('Autres_Escapes_NbPers')
        .ascending("title")
        .find()
        .then(res => {
 let options = [{
 "value": '',
 'label': 'Peu importe'
            }];
            options.push(...res.items.map(NbPers => {
 return {
 'value': NbPers.nbrPers,
 'label': NbPers.nbrPers
                };
            }));
            $w('#iNbPers').options = options;
        });
    $w('#iNbPers').enable();

}

// Function use when Dropdown "iOrganisation" change
export function iOrganisme_change() {
    lastFilterTitre = '';
    $w('#iTitre').value = "";
 if ($w('#iOrganisme').value !== "") {
        $w('#iNbPers').disable()
    } else {
        $w('#iNbPers').enable()
    }
    dropdownTitre()
    dropdownLieux()
    dropdownCanton()
    filter($w('#iOrganisme').value, lastFilterLieu, lastFilterCanton, lastFilterTitre, lastFilterNbPers);
}

// Function use when Dropdown "iLieu" change
export function iLieu_change() {
    lastFilterTitre = '';
    $w('#iTitre').value = "";
 if ($w('#iLieu').value !== "") {
        $w('#iNbPers').disable()
    } else {
        $w('#iNbPers').enable()
    }
    dropdownTitre()
    dropdownOrganisme()
    dropdownCanton()
    filter(lastFilterOrganisme, $w('#iLieu').value, lastFilterCanton, lastFilterTitre, lastFilterNbPers);
}

// Function use when Dropdown "iCanton" change
export function iCanton_change() {
    lastFilterTitre = '';
    $w('#iTitre').value = "";
 if ($w('#iCanton').value !== "") {
        $w('#iNbPers').disable()
    } else {
        $w('#iNbPers').enable()
    }
    dropdownTitre()
    dropdownLieux()
    dropdownOrganisme()
    filter(lastFilterOrganisme, lastFilterLieu, $w('#iCanton').value, lastFilterTitre, lastFilterNbPers);
}

// Function use when Dropdown "iTitre" change
export function iTitre_change() {
    dropdownLieux()
    dropdownOrganisme()
    dropdownCanton()
    filter(lastFilterOrganisme, lastFilterLieu, lastFilterCanton, $w('#iTitre').value, lastFilterNbPers);
}

// Function use when Dropdown "iNbPers" change
export function iNbPers_change() {
    lastFilterTitre = '';
    $w('#iTitre').value = "";
    dropdownTitre()
    dropdownLieux()
    dropdownOrganisme()
    dropdownCanton()
    filter(lastFilterOrganisme, lastFilterLieu, lastFilterCanton, lastFilterTitre, Number($w('#iNbPers').value));
}

// Function use to applied the filter on the repeteater
function filter(organisme, lieu, canton, title, nbPers) {
 if (NEW === "OUI") {
        nbPers = 0;
        NEW = "NON";
    }
 if (lastFilterOrganisme !== organisme || lastFilterLieu !== lieu || lastFilterCanton !== canton || lastFilterTitre !== title || lastFilterNbPers !== nbPers) {
 let newFilter = wixData.filter();
 if (organisme)
            newFilter = newFilter.eq('organisme', organisme);
 if (lieu)
            newFilter = newFilter.eq('lieu', lieu);
 if (canton)
            newFilter = newFilter.eq('canton', canton);
 if (title)
            newFilter = newFilter.eq('title', title);
 if (nbPers)
            newFilter = newFilter.le('nbPersMin', Number(nbPers));
        newFilter = newFilter.ge('nbPersoMax', Number(nbPers));
        $w('#dataset1').setFilter(newFilter);
        lastFilterOrganisme = organisme;
        lastFilterLieu = lieu;
        lastFilterCanton = canton;
        lastFilterTitre = title;
        lastFilterNbPers = nbPers;
        console.log(organisme, lieu, canton, title, nbPers)
    }
}

[sapirh]

Hi,

At this ticket I gave a code example on how creating a search with more then one dropdown.

[SOLVED] I need help to create a Advanced Search | Velo by Wix

Moreover, I believe this video can be helpful:
https://www.youtube.com/watch?v=Hx7_8-lRsW0&feature=youtu.beI

Have a nice day, and best of luck!
Sapir

[fabricemontandon]

Thanks for your response.

I’ve seen the both and I’ve been inspired by your code example

I’ve used it to develop my code. It worked a couple of day but now I have this problem…

It’s a problem with my code or a problem with the database? It look like that some “Canton” are always selected even if it didn’t be in the conditions of selection. It look like a bug of the database but I’m not expert in coding and it’s perhaps my code :-/

[sapirh]

Hi,

Can you share the URL to your site and specific the name of the page with the dropdown so we can inspect?

Thanks,
Sapir

[yaya-pel]

Hello Sapir,
Thank you for your help !
I have a similar issue when displaying data from a collection into a table.
The first drop down function is working but the second no:

import wixData from “wix-data”

export function searchbutton_click(event) {
//Add your code for this event here:
// Runs a query on the “recipes” collection
wixData.query(“FindPartner”)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.contains(“fullNameOrUsername”, $w(“#searchBox”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table”).rows = res.items;
});
}

export function dropdown1_change(event) {
//Add your code for this event here:
// Runs a query on the “recipes” collection
wixData.query(“FindPartner”)
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“activity”, $w(“#dropdown1”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table”).rows = res.items
});}

export function dropdown2_change(event) {
//Add your code for this event here:
// Runs a query on the “recipes” collection
wixData.query(“FindPartner”)
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“lookingForA”, $w(“#dropdown2”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table”).rows = res.items
});}

[fabricemontandon]

This is the editor link:

Log In | Wix

the name of the page is “Autres escapes”

And on the Internet:
www.tinyscape.ch/autres-escapes

[sapirh]

Hi,

Please send a new ticket and we will inspect your problem.

Best,
Sapir

[fabricemontandon]

Somebody find the problem?

[fabricemontandon]

I always have the problem… Somebody can help me?