From successful search to a dynamic page - no return possible after that - :( I have to cry - please support me!!!

kenanuenal · November 27, 2020, 7:24pm

I have to make the search 3 levels filter 1 gender activates nationality and this activates availability. But as soon as I jump to a dynamic page I can’t go back - all filters disappear because I have an on ready function. who can solve my problem - I pray to god

Many many thanks

import {local} from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {  

let Geschlecht2= local.getItem('Geschlecht');
$w('#dropdownName1').value = Geschlecht2; 

let Nationalitat2= local.getItem('Nationalitat');
//$w("#dropdownName2").enable();
$w('#dropdownName2').value = Nationalitat2;

let Verfugbarkeit2= local.getItem('Verfugbarkeit');
//$w("#dropdownName3").enable();
$w('#dropdownName3').value = Verfugbarkeit2;

 
    uniqueDropDown1();
});
function uniqueDropDown1 (){
    wixData.query("Team")
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdownName1").options = buildOptions(uniqueTitles);
      });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.anrede);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}
export function dropdownName1_change(event, $w) {

local.setItem('Geschlecht', $w("#dropdownName1").value);

/////////////COUNTSTART///
$w("#treffer").show();
$w("#text116").show();

wixData.query("Team")
.contains("anrede", $w("#dropdownName1").value)
.contains("status", $w("#dropdownName0").value)
.count()
.then ((result) => {
$w('#treffer').text = result.toString()
});
///////////////COUNTEND

wixData.query("Team")
    .contains("anrede", $w("#dropdownName1").value)
    .contains("status", $w("#dropdownName0").value)
        .limit(100)
        .distinct("bundesland1")
.then(res => {
//$w("#selectionTags14").options = res.items.map(e => ({label: e, value:e}));
})
wixData.query("Team")
    .contains("anrede", $w("#dropdownName1").value)
    .contains("status", $w("#dropdownName0").value)
        .limit(100)
        .distinct("sprachen")
.then(res => {
//$w("#selectionTags13").options = res.items.map(e => ({label: e, value:e}));
})
uniqueDropDown2();
$w("#dropdownName2").enable();
}
function uniqueDropDown2 (){
    wixData.query("Team")
        .contains("anrede", $w("#dropdownName1").value)
        .contains("status", $w("#dropdownName0").value)
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdownName2").options = buildOptions(uniqueTitles);
      });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.nationalitat);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

export function dropdownName2_change(event, $w) {

local.setItem('Nationalitat', $w("#dropdownName2").value);

/////////////COUNTSTART///

wixData.query("Team")
.contains("anrede", $w("#dropdownName1").value)
.contains("status", $w("#dropdownName0").value)
.contains("nationalitat", $w("#dropdownName2").value)
.count()
.then ((result) => {
$w('#treffer').text = result.toString()
});
///////////////COUNTEND

wixData.query("Team")
    .contains("anrede", $w("#dropdownName1").value)
    .contains("status", $w("#dropdownName0").value)
    .contains("nationalitat", $w("#dropdownName2").value)
        .limit(100)
        .distinct("bundesland1")
.then(res => {
//$w("#selectionTags14").options = res.items.map(e => ({label: e, value:e}));
})
wixData.query("Team")
    .contains("anrede", $w("#dropdownName1").value)
    .contains("status", $w("#dropdownName0").value)
    .contains("nationalitat", $w("#dropdownName2").value)
        .limit(100)
        .distinct("sprachen")
.then(res => {
//$w("#selectionTags13").options = res.items.map(e => ({label: e, value:e}));
})
uniqueDropDown3();
$w("#dropdownName3").enable();
}
function uniqueDropDown3 (){
    wixData.query("Team")
        .contains("anrede", $w("#dropdownName1").value)
        .contains("status", $w("#dropdownName0").value)
        .contains("nationalitat", $w("#dropdownName2").value)
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdownName3").options = buildOptions(uniqueTitles);
      });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.verfugbarkeit);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}
///////
export function dropdownName3_change(event, $w) {

    local.setItem('Verfugbarkeit', $w("#dropdownName3").value);

/////////////COUNTSTART///
$w("#treffer").show();
wixData.query("Team")
.contains("anrede", $w("#dropdownName1").value)
.contains("status", $w("#dropdownName0").value)
.contains("nationalitat", $w("#dropdownName2").value)
.contains("verfugbarkeit", $w("#dropdownName3").value)
.count()
.then ((result) => {
$w('#treffer').text = result.toString()
});
///////////////COUNTEND

wixData.query("Team")
    .contains("anrede", $w("#dropdownName1").value)
    .contains("status", $w("#dropdownName0").value)
    .contains("nationalitat", $w("#dropdownName2").value)
    .contains("verfugbarkeit", $w("#dropdownName3").value)
        .limit(100)
        .distinct("bundesland1")
.then(res => {
//$w("#selectionTags14").options = res.items.map(e => ({label: e, value:e}));
})
wixData.query("Team")
    .contains("anrede", $w("#dropdownName1").value)
    .contains("status", $w("#dropdownName0").value)
    .contains("nationalitat", $w("#dropdownName2").value)
    .contains("verfugbarkeit", $w("#dropdownName3").value)
        .limit(100)
        .distinct("sprachen")
.then(res => {
//$w("#selectionTags13").options = res.items.map(e => ({label: e, value:e}));
})
uniqueDropDown4();
//$w("#dropdownName4").enable();
}
function uniqueDropDown4 (){
    wixData.query("Team")
        .contains("anrede", $w("#dropdownName1").value)
        .contains("status", $w("#dropdownName0").value)
        .contains("nationalitat", $w("#dropdownName2").value)
         .contains("verfugbarkeit", $w("#dropdownName3").value)
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
 //$w("#dropdownName4").options = buildOptions(uniqueTitles);
      });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.ausbildung);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}
///////

CODE-NINJA · November 27, 2020, 7:41pm

Das ist aber ganz schön viel CODE! (Bin mir ja nicht so ganz sicher, aber gibt bestimmt bessere Lösungen ;-).

Wenn man zwischen Seiten hin und her springt, ist es normal dass DATEN verloren gehen. Um Daten zwischenzeitlich zu speichern, gibt es das sogenannte “wix-storage” mit den Befehlen wie “local”

https://www.wix.com/corvid/reference/wix-storage/local

oder “session”

https://www.wix.com/corvid/reference/wix-storage/session

oder “memory”

https://www.wix.com/corvid/reference/wix-storage/memory

Lies dich da mal ein und nutze eines dieser angebotenen APIs.

TRANSLATION:
You should take a look at one of these links i gave you.
You will get more infos in the given links.

Everytime you jump between pages you lost data. So to prevent this, you use some memory.

kenanuenal · November 27, 2020, 8:53pm

Hallo RS Vielen Dank, die Speicherung der Filterdaten funktioniert ganz gut - das Problem sind meine Filter. Zum Beispiel: Wenn ich wenn eine dynamischen Seite zurück auf meine Suche springe sind die Filter da. Jedoch ist mein erster Filer auf “Geschlecht” und die anderen 2 sind inaktiv. Das ist mein Problem - on ready sind filter 2 und 3 nicht “enabled” Dh wenn ich zurück komme sind meine 2. und 3. nicht enabled. Vielen Dank für diene Hilfe

EN: Hello RS Thank you, saving the filter data works quite well - the problem are my filters. For example: When I jump back to my search on a dynamic page the filters are there. However, my first filter is on “gender” and the other 2 are inactive. This is my problem - on ready are filter 2 and 3 not “enabled” So when I come back my 2nd and 3rd are not enabled. Thanks for your help

CODE-NINJA · November 27, 2020, 9:40pm

Ich schaue mir das morgen mal genauer an, bin heute schon übermüdet xD.
Habe wohl auf deinen Code nicht wirklich hingeschaut, du hattest ja das mit LOCAL schon drin.

Will take a look tomorrow on it.

kenanuenal · November 28, 2020, 3:28pm

@russian-dima Many thanks Russian-Dima. I think on ready is great, but on 2x it breaks everything, because when the user comes back from the dynamic page, on ready will close everything again, because these fields are deactivated again. Bin schon sehr aufgeregt

CODE-NINJA · November 28, 2020, 4:15pm

@kenanuenal

What if you work without DISABLING and ENABLING ?
Not possible?

CODE-NINJA · November 28, 2020, 4:29pm

@kenanuenal

Here my first results, but still not ready to show you the end-result /solution.
(Ich bin noch am Werke, könnte noch etwas dauern, die ersten Zwischenergebnisse kannst du dir im folgenden Beispiel selbst ansehen…

Take a look at the example here…
https://www.media-junkie.com/test-site

Here the code. It will be a little bit diffrent from your code.
(Habe bissel was an deinem Code verändert und auch nicht vollständig übernommen, ist leider noch in Arbeit ^^).

import wixData from 'wix-data';
import {local} from 'wix-storage';

var selected

$w.onReady(function () {
 //Datenspeicherung....
 let Status = local.getItem('Status');               $w('#DD0').value = Status; 
 let Geschlecht = local.getItem('Geschlecht');       $w('#DD1').value = Geschlecht;
 let Nationalitat = local.getItem('Nationalitat');   $w('#DD2').value = Nationalitat;
 let Verfugbarkeit = local.getItem('Verfugbarkeit'); $w('#DD3').value = Verfugbarkeit;
 
 //DropDown-Benennung....(Betitelung)
    wixData.query("Team")
    .limit(100)
    .find()
    .then(results => {
 const uniqueTitles0 = getUniqueTitles0(results.items);
 const uniqueTitles1 = getUniqueTitles1(results.items);
 const uniqueTitles2 = getUniqueTitles2(results.items);
 const uniqueTitles3 = getUniqueTitles3(results.items);

        $w("#DD0").options = buildOptions0(uniqueTitles0);  //---> STATUS
        $w("#DD1").options = buildOptions1(uniqueTitles1);  //---> ANREDE
        $w("#DD2").options = buildOptions2(uniqueTitles2);  //---> NATIONALITÄT
        $w("#DD3").options = buildOptions3(uniqueTitles3);  //---> VERFÜGBARKEIT
    });

 function getUniqueTitles0(items) {const titlesOnly = items.map(item => item.status);        return [...new Set(titlesOnly)];}
 function buildOptions0(uniqueList0) {return uniqueList0.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles1(items) {const titlesOnly = items.map(item => item.anrede);        return [...new Set(titlesOnly)];}
 function buildOptions1(uniqueList1) {return uniqueList1.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles2(items) {const titlesOnly = items.map(item => item.nationalitat);  return [...new Set(titlesOnly)];}
 function buildOptions2(uniqueList2) {return uniqueList2.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles3(items) {const titlesOnly = items.map(item => item.verfugbarkeit); return [...new Set(titlesOnly)];}
 function buildOptions3(uniqueList3) {return uniqueList3.map(curr => {return {label:curr, value:curr};});}
 

 //DD0-Action (onChange)...    ---> Status
    $w('#DD0').onChange(()=>{selected = 0
        deactivate_allDropDowns()
        $w('#DD0').style.backgroundColor = "rgb(35,150,100)"
        COUNTER("status",$w('#DD0').value)
    })

 //DD1-Action (onChange)...    ---> Anrede
    $w('#DD1').onChange(()=>{selected = 1
        deactivate_allDropDowns()
        $w('#DD0').style.backgroundColor = "rgb(35,150,100)"
        $w('#DD1').style.backgroundColor = "rgb(35,150,100)"
        COUNTER("status",$w('#DD0').value, "anrede",$w('#DD1').value)
    })

 //DD2-Action (onChange)...  ---> Nationalität
    $w('#DD2').onChange(()=>{selected = 2
        $w('#DD0').style.backgroundColor = "rgb(35,150,100)"
        $w('#DD1').style.backgroundColor = "rgb(35,150,100)"
        $w('#DD2').style.backgroundColor = "rgb(35,150,100)"
        COUNTER("status",$w('#DD0').value, "anrede",$w('#DD1').value, "nationalitat",$w('#DD2').value)
    })
});

function COUNTER (FIELD0, VALUE0, FIELD1, VALUE1, FIELD2, VALUE2) {
 // Setzen des Zählers.....
 if (selected === 3) {console.log("EINGANG-3"),          set_FILTER_3()}
 else if (selected === 2) {console.log("EINGANG-2"),     set_FILTER_2(FIELD0, VALUE0, FIELD1, VALUE1, FIELD2, VALUE2)}
 else if (selected === 1) {console.log("EINGANG-1"),     set_FILTER_1(FIELD0, VALUE0, FIELD1, VALUE1)}
 else if (selected === 0) {console.log("EINGANG-0"),     set_FILTER_0(FIELD0, VALUE0)}

    $w("#treffer").show();
    $w("#text116").show();
}

function set_FILTER_0 (field0, value0) {
    wixData.query("Team")
    .contains(field0, value0)   // ---> Status
    .count()
    .then ((result) => {
        console.log(result)
        $w('#treffer').text = result.toString()
    });
}

function set_FILTER_1 (field0, value0, field1, value1) {
    wixData.query("Team")
    .contains(field0, value0)   // ---> Status
    .contains(field1, value1)   // ---> Anrede
    .count()
    .then ((result) => {
        console.log(result)
        $w('#treffer').text = result.toString()
    });
}

function set_FILTER_2 (field0, value0, field1, value1, field2, value2) {
    wixData.query("Team")
    .contains(field0, value0)   // ---> Status
    .contains(field1, value1)   // ---> Anrede
    .contains(field2, value2)   // ---> Nationalität
    .count()
    .then ((result) => {
        console.log(result)
        $w('#treffer').text = result.toString()
    });
}

function set_FILTER_3 (field0, value0, field1, value1, field2, value2, field3, value3) {
    wixData.query("Team").filter
    .contains(field0, value0)   // ---> Status
    .contains(field1, value1)   // ---> Anrede
    .contains(field2, value2)   // ---> Nationalität
    .contains(field3, value3)   // ---> Verfügbarkeit
    .count()
    .then ((result) => {
        console.log(result)
        $w('#treffer').text = result.toString()
    });
}

function deactivate_allDropDowns (parameter) {
    $w('#DD1').style.backgroundColor = "rgb(150,35,35)"
    $w('#DD2').style.backgroundColor = "rgb(150,35,35)"
    $w('#DD3').style.backgroundColor = "rgb(150,35,35)"
}

function MEMORY (parameter) {
    local.setItem('Status',         $w("#DD0").value);
    local.setItem('Geschlecht',     $w("#DD1").value);
    local.setItem('Nationalität',   $w("#DD2").value);
    local.setItem('Verfügbarkeit',  $w("#DD3").value);
}

P.S.: I believe it would be much easier, if you would use a DATASET.
(In deinem Code kann ich nicht erkennen, dass du für die Filter-Funktion diese auch verwendest, obwohl auf dem gezeigten Bild ein DATASET abgebildet ist).
Ich habe mir das natürlich nun alles von deinem bereitgestellten Code versucht abzuleiten, kann sein, dass ich auch irgendwo etwas falsch interpretiert habe.)

kenanuenal · November 28, 2020, 5:19pm

@russian-dima This is a good possibility, therefore I don’t know an alternative solution

Te following should (can pls) be happen: I am gonna allow all firlters from the beginning, i.e. the searcher can start the search for example with the nationality.

Then the other two dropdown contents would have to adapt to it, is that possible?

That would be much better - if he or she starts the search for example with the 3 filters and selects the availability, then the nations would have to adapt - sound great

something like 3 matrix statement, if that is possible you are a hero for me <3

CODE-NINJA · November 28, 2020, 5:38pm

@kenanuenal

This is the way you should go… (use the predifined USER-INTERFACE.
You can improve this a lot.

Take a second look onto the following example…
https://www.media-junkie.com/test-site

The SEARCH-BUTTON works with DATASET (Result showing in table).
The onCHANGE-Event with normal DATA (Result showing as “TREFFER”).

import wixData from 'wix-data';
import {local} from 'wix-storage';

$w.onReady(function () {
 //Datenspeicherung....
 let Status = local.getItem('Status');               $w('#DD0').value = Status; 
 let Geschlecht = local.getItem('Geschlecht');       $w('#DD1').value = Geschlecht;
 let Nationalitat = local.getItem('Nationalitat');   $w('#DD2').value = Nationalitat;
 let Verfugbarkeit = local.getItem('Verfugbarkeit'); $w('#DD3').value = Verfugbarkeit;
 
 //DropDown-Benennung....(Betitelung)
    wixData.query("Team")
    .limit(100)
    .find()
    .then(results => {
 const uniqueTitles0 = getUniqueTitles0(results.items);
 const uniqueTitles1 = getUniqueTitles1(results.items);
 const uniqueTitles2 = getUniqueTitles2(results.items);
 const uniqueTitles3 = getUniqueTitles3(results.items);

        $w("#DD0").options = buildOptions0(uniqueTitles0);  //---> STATUS
        $w("#DD1").options = buildOptions1(uniqueTitles1);  //---> ANREDE
        $w("#DD2").options = buildOptions2(uniqueTitles2);  //---> NATIONALITÄT
        $w("#DD3").options = buildOptions3(uniqueTitles3);  //---> VERFÜGBARKEIT
    });

 function getUniqueTitles0(items) {const titlesOnly = items.map(item => item.status);        return [...new Set(titlesOnly)];}
 function buildOptions0(uniqueList0) {return uniqueList0.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles1(items) {const titlesOnly = items.map(item => item.anrede);        return [...new Set(titlesOnly)];}
 function buildOptions1(uniqueList1) {return uniqueList1.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles2(items) {const titlesOnly = items.map(item => item.nationalitat);  return [...new Set(titlesOnly)];}
 function buildOptions2(uniqueList2) {return uniqueList2.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles3(items) {const titlesOnly = items.map(item => item.verfugbarkeit); return [...new Set(titlesOnly)];}
 function buildOptions3(uniqueList3) {return uniqueList3.map(curr => {return {label:curr, value:curr};});}

})

//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------
var DATABASE    = "database1"
var DATASET     = "#dataset1"
var REFERENCE1  = "status" 
var REFERENCE2  = "anrede" 
var REFERENCE3  = "nationalitat" 
var REFERENCE4  = "verfugbarkeit" 
var REFERENCE5  = ""
var REFERENCE6  = ""
//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------

export function DD0_change(event) {}//SEARCH_ENGINE()}
export function DD1_change(event) {}//SEARCH_ENGINE()}
export function DD2_change(event) {}//SEARCH_ENGINE()}
export function DD3_change(event) {}//SEARCH_ENGINE()}
export function DD4_change(event) {}//SEARCH_ENGINE()}

export function BTNsearch_click(event) {SEARCH_ENGINE(), $w('#table1').refresh()}

async function SEARCH_ENGINE() { 
 let filter =  wixData.filter()  
 let item1, item2, item3, item4

 //DD1-DD5 = DropDowns
 if ($w('#DD0').value!=0) {item1 = $w('#DD0').value}
 if ($w('#DD1').value!=0)  {item2 = $w('#DD1').value}
 if ($w('#DD2').value!=0)  {item3 = $w('#DD2').value}
 if ($w('#DD3').value!=0)  {item4 = $w('#DD3').value}
 //----------------------------------------------------------------------------------------------------------------------------
 // if(typeof item1=="string"){item1 = Number($w('#DD1').value)}
 // if(typeof item3=="string"){item3 = Number($w('#DD3').value)}
 
  console.log(item1)
  console.log(typeof item1)
 
 if (item1!=0)     {filter = filter.eq(REFERENCE1, item1)}
 if (item2!=0)     {filter = filter.eq(REFERENCE2, item2)}
 if (item3!=0)     {filter = filter.eq(REFERENCE3, item3)}
 if (item4!=0)     {filter = filter.eq(REFERENCE4, item4)}

  console.log(filter)
 await  $w(DATASET).setFilter(filter)
}

or this part with using —> “contains”…

 if (item1!=0)     {filter = filter.contains(REFERENCE1, item1)}
 if (item2!=0)     {filter = filter.contains(REFERENCE2, item2)}
 if (item3!=0)     {filter = filter.contains(REFERENCE3, item3)}
 if (item4!=0)     {filter = filter.contains(REFERENCE4, item4)}

CODE-NINJA · November 29, 2020, 11:20am

@kenanuenal
Take a look at this example, here i worked once with selection tags, i am not sure if you will find here your solution, but i remember that there was also a filtering by SELECTION-TAGS.

https://russian-dima.wixsite.com/meinewebsite/filter-my-phones

(Ich werde weiterhin mal etwas Zeit nehmen und mir dein Filter-Problem anschauen.)

kenanuenal · November 29, 2020, 11:55am

@russian-dima this is a great alternative, I like it very much. I’m very happy and appreciate your work. I think this alternative is very often asked in the wix world and many user will benefit from your work - don’t give up - thank you very much.

CODE-NINJA · November 29, 2020, 2:26pm

@kenanuenal
Perhaps one more idea, which also could work, if you will work on it, is to use check-box-groups.

See the new example here…
https://www.media-junkie.com/test-site

The only thing which you have to improve/to optimize is to create a SWITCH-BUTTON, which would switch between two filter-behaviours…

AND-FILTERING
OR-FILTERING

Use the example with the DATASET —> using just the SEARCH-BUTTON.
Results will be shown in the TABLE below.

Following scenario: (concentrating just on —> LANGUAGES / SPRACHEN)

Choose/select just one language from the given menu (opens by clicking on SPRACHEN). See the given DATABASE on TOP and start with the SEARCH-BUTTON.
Do the same again, but this time choose two languages (DEUTSCH & ENGLISH)
Do the same again, but this time choose the following 3-languages (DEUTSCH-ENGLISCH-RUSSISCH).

What are the results? Normaly just me (russian-dima) should be shown at the last testing action.

Now you should recognize, why i talked about AND & OR.

The given Search-Engine uses → AND-function

So if you would be able to create a SWITCH-BUTTON in the Languages-Options-Panel, you would be able to choose the algorithm/function of the search-engine!

RESULT: You would get a super flexible serch-engine!

Here some updated CODE-LINES…

let item1, item2, item3, item4, item5

/DD1-DD5 = DropDowns
 if ($w('#DD0').value!=0) {item1 = $w('#DD0').value}
 if ($w('#DD1').value!=0)  {item2 = $w('#DD1').value}
 if ($w('#DD2').value!=undefined)  {item3 = $w('#DD2').value}
 if ($w('#DD3').value!=0)  {item4 = $w('#DD3').value}
 
if ($w('#CBgroupSprachen').value[0]!==undefined)  {item5 = $w('#CBgroupSprachen').value}

 if (item1!=0)     {filter = filter.eq(REFERENCE1, item1)}
 if (item2!=0)     {filter = filter.eq(REFERENCE2, item2)}
 if (item3!=0)     {filter = filter.eq(REFERENCE3, item3)}
 if (item4!=0)     {filter = filter.eq(REFERENCE4, item4)}
 
 if (item5!==undefined)  {console.log("item5 in action") 
   for (var i = 0; i < item5.length; i++) {
            filter = filter.eq(REFERENCE5, item5[i])
            console.log("Gewählte-Sprache ( " + i + " ) = " + item5[i] )
        }
    }
 else {console.log("Keine Sprachen ausgewählt")}

P.S.: As you can see, i also updated/changed some fields from normal field to “TAGS”

kenanuenal · November 29, 2020, 9:54pm

@russian-dima YOURE MY HERO - YOURE THE BEST - THANK YOUUUU
it works. thank you very much. the search is very flexible, but

why do the checkboxes show “federal states” that are not in my database? can I connect that with the dataset? if there is no solution, can i live with it!
why does the storage of data in the checkboxes not work? do you know this warning?

Wix code SDK Warning: The value parameter of “CB1” that is passed to the value method cannot be set to null or undefined.

I think the is something wrong:

//let bundesland1 = local.getItem('bundesland1');    $w('#CB1').value = bundesland1;

last question, then i will leave you in peace
Have to display of the results below but i have to put it somewhere in the middle do you have any last advice for me please?

starting with line 146:

//Treffer_count
{
    wixData.query("Team")
   .contains("status", $w("#DD0").value)
   .contains("anrede", $w("#DD1").value)
   .contains("nationalitat", $w("#DD2").value)
   .contains("verfugbarkeit", $w("#DD3").value)
   .contains("ausbildung", $w("#DD4").value)
   .contains("berufserfahrung", $w("#DD5").value)
   .count()
    .then ((result) => {
        console.log(result)
        $w('#treffer').text = result.toString()
    });
}

Hier das ganze Projekt ---------------------------------------Here the coding:)


import wixData from 'wix-data';
import {local} from 'wix-storage';

$w.onReady(function () {

 //Datenspeicherung....
 let status = local.getItem('status');                      $w('#DD0').value = status; 
 let anrede = local.getItem('anrede');                      $w('#DD1').value = anrede;
 let nationalitat = local.getItem('nationalitat');          $w('#DD2').value = nationalitat;
 let verfugbarkeit = local.getItem('verfugbarkeit');        $w('#DD3').value = verfugbarkeit;
 let ausbildung = local.getItem('ausbildung');              $w('#DD4').value = ausbildung;
 let berufserfahrung = local.getItem('berufserfahrung');    $w('#DD5').value = berufserfahrung;
 //let bundesland1 = local.getItem('bundesland1');    $w('#CB1').value = bundesland1;

 

 //DropDown-Benennung....(Betitelung)
    wixData.query("Team")
    .limit(100)
    .find()
    .then(results => {
 
 const uniqueTitles0 = getUniqueTitles0(results.items);
 const uniqueTitles1 = getUniqueTitles1(results.items);
 const uniqueTitles2 = getUniqueTitles2(results.items);
 const uniqueTitles3 = getUniqueTitles3(results.items);
 const uniqueTitles4 = getUniqueTitles4(results.items);
 const uniqueTitles5 = getUniqueTitles5(results.items);
 const uniqueTitles6 = getUniqueTitles6(results.items);
 const uniqueTitles7 = getUniqueTitles7(results.items);

        $w("#DD0").options = buildOptions0(uniqueTitles0);  //---> STATUS
        $w("#DD1").options = buildOptions1(uniqueTitles1);  //---> ANREDE
        $w("#DD2").options = buildOptions2(uniqueTitles2);  //---> NATIONALITÄT
        $w("#DD3").options = buildOptions3(uniqueTitles3);  //---> VERFÜGBARKEIT
        $w("#DD4").options = buildOptions4(uniqueTitles4);  //---> AUSBILDUNG
        $w("#DD5").options = buildOptions5(uniqueTitles5);  //---> BERUFSERFAHRUNG
 

    });

 function getUniqueTitles0(items) {const titlesOnly = items.map(item => item.status);        return [...new Set(titlesOnly)];}
 function buildOptions0(uniqueList0) {return uniqueList0.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles1(items) {const titlesOnly = items.map(item => item.anrede);        return [...new Set(titlesOnly)];}
 function buildOptions1(uniqueList1) {return uniqueList1.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles2(items) {const titlesOnly = items.map(item => item.nationalitat);  return [...new Set(titlesOnly)];}
 function buildOptions2(uniqueList2) {return uniqueList2.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles3(items) {const titlesOnly = items.map(item => item.verfugbarkeit); return [...new Set(titlesOnly)];}
 function buildOptions3(uniqueList3) {return uniqueList3.map(curr => {return {label:curr, value:curr};});}

 function getUniqueTitles4(items) {const titlesOnly = items.map(item => item.ausbildung);    return [...new Set(titlesOnly)];}
 function buildOptions4(uniqueList4) {return uniqueList4.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles5(items) {const titlesOnly = items.map(item => item.berufserfahrung);  return [...new Set(titlesOnly)];}
 function buildOptions5(uniqueList5) {return uniqueList5.map(curr => {return {label:curr, value:curr};});}
 
 function getUniqueTitles6(items) {const titlesOnly = items.map(item => item.bundesland1);  return [...new Set(titlesOnly)];}
 function buildOptions6(uniqueList6) {return uniqueList6.map(curr => {return {label:curr, value:curr};});}

 function getUniqueTitles7(items) {const titlesOnly = items.map(item => item.sprachen);  return [...new Set(titlesOnly)];}
 function buildOptions7(uniqueList7) {return uniqueList7.map(curr => {return {label:curr, value:curr};});}

})

//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------
var DATABASE    = "database1"
var DATASET     = "#dataset1"
var REFERENCE1  = "status" 
var REFERENCE2  = "anrede" 
var REFERENCE3  = "nationalitat" 
var REFERENCE4  = "verfugbarkeit" 
var REFERENCE5  = "ausbildung"
var REFERENCE6  = "berufserfahrung"
var REFERENCE7  = "bundesland1"
var REFERENCE8  = "sprachen"
var REFERENCE9  = ""
var REFERENCE10  = ""
//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------

export function DD0_change(event) {}//SEARCH_ENGINE()}
export function DD1_change(event) {}//SEARCH_ENGINE()}
export function DD2_change(event) {}//SEARCH_ENGINE()}
export function DD3_change(event) {}//SEARCH_ENGINE()}
export function DD4_change(event) {}//SEARCH_ENGINE()}
export function DD5_change(event) {}//SEARCH_ENGINE()}
export function CB1_change(event) {}//SEARCH_ENGINE()}
export function CB2_change(event) {}//SEARCH_ENGINE()}

export function BTNsearch_click(event) {SEARCH_ENGINE(), $w('#table1').refresh()}

async function SEARCH_ENGINE() { 
 let filter =  wixData.filter()  
 let item1, item2, item3, item4, item5, item6, item7, item8, item9

 //DD1-DD5 = DropDowns
 if ($w('#DD0').value!=0) {item1 = $w('#DD0').value}
 if ($w('#DD1').value!=0)  {item2 = $w('#DD1').value}
 if ($w('#DD2').value!=0)  {item3 = $w('#DD2').value}
 if ($w('#DD3').value!=0)  {item4 = $w('#DD3').value}
 if ($w('#DD4').value!=0)  {item5 = $w('#DD4').value}
 if ($w('#DD5').value!=0)  {item6 = $w('#DD5').value}
 
 if ($w('#CB1').value[0]!==undefined)  {item7 = $w('#CB1').value}
 if ($w('#CB2').value[0]!==undefined)  {item8 = $w('#CB2').value}


 //----------------------------------------------------------------------------------------------------------------------------
 // if(typeof item1=="string"){item1 = Number($w('#DD1').value)}
 // if(typeof item3=="string"){item3 = Number($w('#DD3').value)}
 
  console.log(item1)
  console.log(typeof item1)
 
 if (item1!=0)     {filter = filter.eq(REFERENCE1, item1)}
 if (item2!=0)     {filter = filter.eq(REFERENCE2, item2)}
 if (item3!=0)     {filter = filter.eq(REFERENCE3, item3)}
 if (item4!=0)     {filter = filter.eq(REFERENCE4, item4)}
 if (item5!=0)     {filter = filter.eq(REFERENCE5, item5)}
 if (item6!=0)     {filter = filter.eq(REFERENCE6, item6)}

 if (item7!==undefined)  {console.log("item7 in action") 
 for (var i = 0; i < item7.length; i++) {
            filter = filter.eq(REFERENCE7, item7[i])
            console.log("Gewähltes- Bundesland ( " + i + " ) = " + item7[i] )
        }
    }
 else {console.log("Kein Bundesland ausgewählt")}


 if (item8!==undefined)  {console.log("item8 in action") 
 for (var i = 0; i < item8.length; i++) {
            filter = filter.eq(REFERENCE8, item8[i])
            console.log("Gewählte Sprache ( " + i + " ) = " + item8[i] )
        }
    }
 else {console.log("Keine Sprache ausgewählt")}


  console.log(filter)

 await  $w(DATASET).setFilter(filter)

//Treffer_count

{
    wixData.query("Team")
   .contains("status", $w("#DD0").value)
   .contains("anrede", $w("#DD1").value)
   .contains("nationalitat", $w("#DD2").value)
   .contains("verfugbarkeit", $w("#DD3").value)
   .contains("ausbildung", $w("#DD4").value)
   .contains("berufserfahrung", $w("#DD5").value)
   .count()
    .then ((result) => {
        console.log(result)
        $w('#treffer').text = result.toString()
    });
}

}

//Resert_Button
export function resetfilter_click(event, $w) {
 
  $w("#DD0").selectedIndex = undefined;
  $w("#DD1").selectedIndex = undefined;
  $w("#DD2").selectedIndex = undefined;
  $w("#DD3").selectedIndex = undefined;
  $w("#DD4").selectedIndex = undefined;
  $w("#DD5").selectedIndex = undefined;
}

Thanks again - Vielen Dank

CODE-NINJA · November 30, 2020, 8:58am

I will take a look today at evening.
1+2 can be done. Question-3 i did not understand.

kenanuenal · November 30, 2020, 11:39am

@russian-dima i am looking forward to your solution suggestions thank you. to question 3, we have a text field = hits, this is calculated after every field change to show the user his hits, where do i have to use this count function and when? the user should see the results immediately after the filter change (found 23 persons) and after the update button table1 is updated. thank you <3

CODE-NINJA · November 30, 2020, 6:22pm

@kenanuenal
Ok, back to you Yulia.

why do the checkboxes show “federal states” that are not in my database? can I connect that with the dataset?

Yes you get a fixed list of STATES when you open the language-menu, because i just put it into the options of the CheckboxGroups (like hard-coding).

And here the hard-coding via CODE… (try to modify it to DYNAMIC CODE)
I will give you just a hint (a little example) where you can see a manualy generated options-list of languages for a Box-Group.
(Ich bin mir sicher, dass du schlau genug bist um das ganze flexibel und dynamisch zu mache). Programmierfahrung scheinst du jedenfalls zu haben)

$w('#CBgroupSprachen').options = [
        {"label": "Deutsch!", "value": "Deutsch"},
        {"label": "Russisch", "value": "Russisch"},
        {"label": "Englisch", "value": "Englisch"}
    ];

Try to modify this to do it more dynamic. This example is a STATIC one.
You will find your solution —> query → result—> array —> + a loop = solution.

Perhaps you can also just connect it with a dataset where you store all the needed languages, but i would recommend you to work more with coding, because it is much more flexible.

why does the storage of data in the checkboxes not work? do you know this warning?
//let bundesland1 = local.getItem(‘bundesland1’); $w(‘#CB1’).value = bundesland1;

Wix code SDK Warning: The value parameter of “CB1” that is passed to the value method cannot be set to null or undefined.

I think your problem in this case is, that you do not see the difference between a normal value and a array-value (multiple-values)

normal-value => myValue = 1
array-value => myArrayValue = [1,2,3,4,5]

CheckboxGroup is a GROUP —> more than just one value! That means, this should work…

$w(‘#CB1’).value = bundesland1 <---- not working.
$w(‘#CB1’).value[0] = bundesland2 <---- working ??? (value-1)
$w(‘#CB1’).value[1] = bundesland3 <— working??? (value-2)
and so on…

You have had the solution already in your code

if ($w('#CB1').value[0]!==undefined)  {item7 = $w('#CB1').value}
if ($w('#CB2').value[0]!==undefined)  {item8 = $w('#CB2').value}

Try the example again, now you will see the 3x hard-coded languages in the languages-menu.

https://www.media-junkie.com/test-site

$w('#CBgroupSprachen').options = [
        {"label": "Deutsch!", "value": "Deutsch"},
        {"label": "Russisch", "value": "Russisch"},
        {"label": "Englisch", "value": "Englisch"}
    ];

kenanuenal · November 30, 2020, 6:49pm

@russian-dima nice, let me try it , thank you - and about my answer, point 3? §: i am looking forward to your solution suggestions thank you. to question 3, we have a text field = hits, this is calculated after every field change to show the user his hits, where do i have to use this count function and when? the user should see the results immediately after the filter change (found 23 persons) and after the update button table1 is updated. thank you <3
youre the best btw

CODE-NINJA · November 30, 2020, 7:57pm

@kenanuenal
Find the right line in your code and put this into it…

 await  $w(DATASET).setFilter(filter)
    .then(()=>{
        let count = $w(DATASET).getTotalCount().toString();
       console.log("COUNT = " + count)
    })

Now your counter should be ready for work.

Good luck and happy coding! (viel Erfolg mit deiner Website!)

Topic		Replies	Views
Redirect a page to a dynamic page Ask the community code , question	5	541	June 1, 2021
Filter = filter.hasSome (see code pls..) Ask the community code , question	2	152	November 17, 2020
Dropdown input on dynamic page with backend query Ask the community code , question	3	168	September 23, 2019
Keeping original filters when returning from dynamic page Ask the community code , wix-stores , question	2	502	May 17, 2019
Issue with keeping filter when returning to table from dynamic page Ask the community code , question	1	187	September 12, 2018

From successful search to a dynamic page - no return possible after that - :( I have to cry - please support me!!!

Related topics