Checkbox Filter Using Search Button > Appear on Lightbox with Repeater

Ask the community
, ,
2

Step-1: Getting-Data + Generating CHB-List…

Till here …

import wixData from 'wix-data';

// ----------USER-INTERFACE------------------
const dbProducts = "Products";
const dbSymptoms = "Symptoms";
const REP1 = "#repeater1 ";
const CHB1 = "#checkbox1"; 
// ----------USER-INTERFACE------------------

let symptomsCB = [];

$w.onReady(async() => {
    //Preparing first REPEATER with data from "Symptoms"-DB first..
    //...and feed repeater1 with this data...
    let symptomData = await loadSymptoms(dbSymptoms);
    console.log("Symptoms: ", symptomData);
    //reset of repeater...
    $w(REP1).data = [];
    //feed repeater with returned data...
    $w(REP1).data = symptomData;


    $w(REP1).onItemReady(($item, itemData, index) => {
        $item('#text1').text = itemData.value;
        $item(CHB1).onClick(async()=> {get_Symptoms();});
        $item('#text1').text = itemData.value;
    });
});

function loadSymptoms(DB) {
    wixData.query(DB)
    .find()
    .then(results => {
        let symptomsDropdownOptions = [];
        symptomsDropdownOptions.push(...results.items.map(symptoms => {
            return { _id: symptoms._id, value: symptoms.title, label: symptoms.title };
        }));
        return symptomsDropdownOptions;
    });
}

… everything looks not bad.

You get data from SYMPTOMS-DB and feed your REPEATER1 with all the data from SYMPTOMS-DB, to generate your dynamic Check-Box-List.

Step-2: Click onto a repeated-item → searchCB()

Part of already coded part above… → the click to start all the process…

$item(CHB1).onClick(()=> {searchCB();});

Attention the name of the function has been changed in this example…

function get_Symptoms() {
    $w('#repeater1').forEachItem(($item, itemData, index) => {
        let text = $item('#text1').text;        
        if ($item('#checkbox1').checked) {
            symptomsCB.push(
               {id:$item('#checkbox1').id, value:text, label:text}
            );
        }
    });
}

You got all your selected SYMPTOMS from your REPEATER now!

Step-3: Click the SEARCH-Button to start the search…

!!! AND HERE IT IS —> YOUR ERROR !!!

export function searchButton3_click(event) {---> symptomsCB = [];

First you do a lot to get all the selected values putting them into an ARRAY!!!
But when starting your → SEARCH <— —> you FIRST RESET the ARRAY ???

Ok, i think you should REWRITE further CODE-PARTS (rewrite your —>

export function searchButton3_click(event) {.........

…putting it also into the onReady()-Main-Block …

$w.onReady(async() => {
    // already generated code ...
    // code ...
    // code ...
    // code ...
    
    $w('#button1').onClick(()=>{
        FUNCTION3();
    });
});

Another aspect —> If you are using a DATASET-CONNECTION → do not for get to add…

$w.onReady(async() => {
    $w('#dataset1').onReady(()=>{});
    // already generated code ...
    // code ...
    // code ...
    // code ...
    
        $w('#btnSearch').onClick(()=>{
            start_SearchFunction();
        });
    });
});

Also use just logical element-IDs :
#button1 ----------------------------------------> BAD !!!
#btnSearch ------------------------------------> GOOD !!!

Now try to get all that done and complete your task !!!

!!! Good luck and happy coding !!!

Code-Ninja