Need help with Checkbox repeater code!

depthrecords · May 23, 2022, 3:49pm

Hello, I am having issues with my checkboxes not checking in my repeater, they show what was selected when you post an entry in the database and won’t let me custom check anything.

Here is my code, if you can help I would deeply appreciate it, everything I have searched online hasn’t helped… Thanks!

import { local } from ‘wix-storage’ ;

import wixData from ‘wix-data’ ;

$w . onReady ( function () {

var sameWord = local . getItem ( “searchWord” );

$w ( “#searchBar” ). value = sameWord ;

$w ( “#searchBar” ). placeholder = sameWord ;

// $w(‘#dataset1’).onReady(function) () {

    search (); 

});

// });

export function searchButton_click_1 ( event ) {

search ();

}
function search ( ) {

   wixData . query ( 'AdMe Database' ) 

   . contains ( 'fullName' ,  $w ( "#searchBar" ). value ) 

   . or ( wixData . query ( 'AdMe Database' ). contains ( 'ad title' ,  $w ( "#searchBar" ). value )) 

   . or ( wixData . query ( 'AdMe Database' ). contains ( 'country' ,  $w ( "#searchBar" ). value )) 

   . or ( wixData . query ( 'AdMe Database' ). contains ( 'city / state / province' ,  $w ( "#searchBar" ). value )) 

   . or ( wixData . query ( 'AdMe Database' ). contains ( 'price' ,  $w ( "#searchBar" ). value )) 

   . find () 

   . then  ( res  => { 

         $w ( '#repeater1' ). data  =  res . items ; 

   });

}

const databaseName = ‘AdMe Database’ ;
const databaseField = ‘Ad Category, Sex Category, Age Category’
$w . onReady ( function () {

$w ( ‘#checkboxGroup1’ ). onChange (( event ) => {
const selectedBox = $w ( ‘#checkboxGroup1’ ). value ;
addItemstoRepeater ( selectedBox );

$w ( ‘#checkboxGroup2’ ). onChange (( event ) => {
const selectedBox = $w ( ‘#checkboxGroup2’ ). value ;
addItemstoRepeater ( selectedBox );

$w ( ‘#checkboxGroup3’ ). onChange (( event ) => {
const selectedBox = $w ( ‘#checkboxGroup3’ ). value ;
addItemstoRepeater ( selectedBox );

})

});

function addItemstoRepeater ( selectedOption = ) {

  **let**  dataQuery  =  wixData . query ( databaseName ); 

 **if**  ( selectedOption . length  >  0 ) {         
    dataQuery  =  dataQuery . hasSome ( databaseField ,  
selectedOption );    
} 

 dataQuery        
    . find ()         
    . then ( results  => {             
    **const**  filtereditemsReady  =  results . items ;             
    $w ( '#repeater1' ). data  =  filtereditemsReady ;

}

CODE-NINJA · May 24, 2022, 6:29pm

Seems like you have some issues inside your code!

You are using more then one → onReady-command! → NOT GOOD !
Your onClick-Functions are not closed…

$w.onReady(function(){
    $w('#checkboxGroup1').onChange((event) => {        
        const selectedBox = $w('#checkboxGroup1').value;        
        addItemstoRepeater(selectedBox); 
     <--- NOT CLOSED --> NOT OK!

    $w('#checkboxGroup2').onChange((event) => {        
        const selectedBox = $w('#checkboxGroup2').value;        
        addItemstoRepeater(selectedBox); 
      <--- NOT CLOSED --> NOT OK!

    $w('#checkboxGroup3').onChange((event) => {        
        const selectedBox = $w('#checkboxGroup3').value;        
        addItemstoRepeater(selectedBox); 
    }); // <---- CLOSED and OK !!!!
});

And this one also never will work…

function addItemstoRepeater(selectedOption = []) {
      let dataQuery = wixData.query(databaseName);

     if (selectedOption.length > 0) {        
        dataQuery = dataQuery.hasSome(databaseField, 
    selectedOption);   
    }
     dataQuery       
        .find()        
        .then(results => {            
        const filtereditemsReady = results.items;            
        $w('#repeater1').data = filtereditemsReady;
}

What’s that here … ?

function addItemstoRepeater(selectedOption = []) {..........

Why you are inputing an EMPTY ARRAY into a fucntion and expecting some results?

Also using such ID’S for your → DATABASE-FIELDS ← is not one of the best ideas ! …

const dbField = 'Ad Category, Sex Category, Age Category'

Was this DB-Field created by a stupid additional APP?

Ok, let’s recode all your code from scratch!


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

///------------------------
const DATABASE =    'AdMe Database';
const dbField =     'Ad Category, Sex Category, Age Category'

let mySelectedOptions = [];

$w.onReady(()=> {
    // FIRST GETTING SOME DATA OUT OF Wix-Storage......
    var searchValue = local.getItem("searchWord");  
    // filling your searchbar with the memorized value....
    $w("#searchBar").value = searchValue;
    $w("#searchBar").placeholder = searchValue;

    $w('#searchButton').onClick(async(event)=> {console.log(event.target.id+"-clicked!"); 
        // starting the SEARCH-FUNCTION...after a click onto the SEARCH-BUTTON....
        let resData = await search(searchValue); console.log("My RESULTS = ", resData);
    });

    $w('#checkboxGroup1').onChange((event)=> {console.log(event.target.id+"-clicked!");       
        const mySelectedOptions = $w('#checkboxGroup1').value;        
        addItemstoRepeater(selectedBox); console.log(" mySelectedOptions ", mySelectedOptions);
    });
    
    $w('#checkboxGroup2').onChange((event)=> {console.log(event.target.id+"-clicked!");      
        const mySelectedOptions = $w('#checkboxGroup2').value; console.log(" mySelectedOptions ", mySelectedOptions);       
        addItemstoRepeater(selectedBox); 
    });

    $w('#checkboxGroup3').onChange((event)=> {console.log(event.target.id+"-clicked!");       
        const mySelectedOptions = $w('#checkboxGroup3').value; console.log(" mySelectedOptions ", mySelectedOptions);  
        addItemstoRepeater(selectedBox); 
    });
});

// --------------- MY-FUNCTIONS -----------------------------------
function search() {
    wixData.query(DATABASE).contains('fullName', myValue)
    .or(wixData.query(DATABASE).contains('ad title', myValue))
    .or(wixData.query(DATABASE).contains('country', myValue))
    .or(wixData.query(DATABASE).contains('city / state / province', myValue))
    .or(wixData.query(DATABASE).contains('price', myValue))
    .find()
    .then((res)=> {//console.log("FOUND-DATA after SEARCH-PROCESS: ", res);
        $w('#repeater1').data = res.items;
        return (res);
    }).catch((err)=>{console.log("ERROR: ", err);});
}

function addItemstoRepeater(mySelectedOptions) {
      let dataQuery = wixData.query(databaseName);

    if (mySelectedOptions.length>0) {dataQuery = dataQuery.hasSome(databaseField, selectedOption);}

    dataQuery.find()        
    .then((results)=> {            
        const filtereditemsReady = results.items;            
        $w('#repeater1').data = filtereditemsReady;
    });
}

This is not the end-solution → work on it, try to understand your own code!

DO NOT FORGET TO USE THE —> CONSOLE !!! IT WILL HELP YOU TO UNDERSTAND YOUR OWN CODE!!!

depthrecords · May 24, 2022, 6:36pm

@russian-dima thank you for your help! I greatly appreciate it!

depthrecords · May 24, 2022, 11:19pm

sorry for being a noob, but the dataset won’t load the repeater.

CODE-NINJA · May 25, 2022, 12:13am

The dataset, you commented out inside your code?
// $w(‘#dataset1’).onReady(function) () {

You maybe should give full informations.

Just try to use the page-search and see how many times you mentioned → DATASET inside your opened post?

Exactly, just one time, and it was commented out…

When you describe your issue, try alsways to be precise as most as possible.

WRONG or INCOMPLETE INPUT = WRONG OUTPUT

depthrecords · May 25, 2022, 12:27am

Nothing is coming up in the search or checkboxes.

CODE-NINJA · May 25, 2022, 12:30am

Will take a look on it in 24-hours again.
In the meanwhile to try to give more information…

Database? screenshot of first 3-5 rows uncluding the db-fields/db-field-ids? screenshot?
Dataset? (ID?/connected to?) screenshot?
Maybe even the setup and the flow of the actions you do ?

The more input, the more precise and faster output.

Also already checked all integrated console.logs?
What do they give back for results? (very useful info)

You know how to use CONSOLE ?

If not, press F-12 and navigate to CONSOLE, if working with GOOGLE-Browser.
You also will find all console-logs inside PREVIEW-MODE, of your WIX-EDITOR.

depthrecords · May 25, 2022, 12:32am

Will do thanks for your help

depthrecords · May 25, 2022, 12:46am

here is me using the search bar and the checkboxes for the filter or repeater but nothing shows from database

connected checkboxes to dataset

here are the database categories

depthrecords · May 25, 2022, 11:03am

this is what my code looks like now for the search

// --------------- MY-FUNCTIONS -----------------------------------
function search ( ) {
wixData . query ( DATABASE ). contains ( ‘fullName’ , myValue )
. or ( wixData . query ( DATABASE ). contains ( ‘ad title’ , myValue ))
. or ( wixData . query ( DATABASE ). contains ( ‘country’ , myValue ))
. or ( wixData . query ( DATABASE ). contains ( ‘ad description’ , myValue ))
. or ( wixData . query ( DATABASE ). contains ( ‘details’ , myValue ))
. or ( wixData . query ( DATABASE ). contains ( ‘company / name’ , myValue ))
. or ( wixData . query ( DATABASE ). contains ( ‘city / state / province’ , myValue ))
. or ( wixData . query ( DATABASE ). contains ( ‘price’ , myValue ))
. find ()
. then (( res )=> { //console.log("FOUND-DATA after SEARCH-PROCESS: ", res);
$w ( ‘#repeater1’ ). data = res . items ;
return ( res );
}). catch (( err )=>{ console . log ( "ERROR: " , err );});
}

depthrecords · May 26, 2022, 12:46am

I am working with your edited code btw

CODE-NINJA · May 26, 2022, 9:32am

First of all, please update your code, because i did a mistake, or better said, i forgot to edit some code-lines…

$w('#checkboxGroup1').onChange((event)=> {console.log(event.target.id+"-clicked!");       
        const mySelectedOptions = $w('#checkboxGroup1').value;        
        addItemstoRepeater(mySelectedOptions); console.log(" mySelectedOptions ", mySelectedOptions);
    });
    
    $w('#checkboxGroup2').onChange((event)=> {console.log(event.target.id+"-clicked!");      
        const mySelectedOptions = $w('#checkboxGroup2').value; console.log(" mySelectedOptions ", mySelectedOptions);       
        addItemstoRepeater(mySelectedOptions); 
    });

    $w('#checkboxGroup3').onChange((event)=> {console.log(event.target.id+"-clicked!");       
        const mySelectedOptions = $w('#checkboxGroup3').value; console.log(" mySelectedOptions ", mySelectedOptions);  
        addItemstoRepeater(mySelectedOptions); 
    });

And also here forgot to update DATABASE…

function addItemstoRepeater(mySelectedOptions) {
    let dataQuery = wixData.query(DATABASE);

Second what do you get in CONSOLE as OUTPUT for…

console.log(" mySelectedOptions ", mySelectedOptions);

UPDATED…

$w.onReady(()=> {
    // FIRST GETTING SOME DATA OUT OF Wix-Storage......
    var searchValue = local.getItem("searchWord");  
    // filling your searchbar with the memorized value....
    $w("#searchBar").value = searchValue;
    $w("#searchBar").placeholder = searchValue;

    $w('#searchButton').onClick(async(event)=> {console.log(event.target.id+"-clicked!"); 
        // starting the SEARCH-FUNCTION...after a click onto the SEARCH-BUTTON....
        let resData = await search(searchValue); 
        console.log("My RESULTS = ", resData);
    });

    $w('#checkboxGroup1').onChange((event)=> {console.log(event.target.id+"-clicked!");       
        const mySelectedOptions = $w('#checkboxGroup1').value;        
        addItemstoRepeater(mySelectedOptions); 
        console.log(" mySelectedOptions ", mySelectedOptions);
    });
    
    $w('#checkboxGroup2').onChange((event)=> {console.log(event.target.id+"-clicked!");      
        const mySelectedOptions = $w('#checkboxGroup2').value; 
        console.log(" mySelectedOptions ", mySelectedOptions);       
        addItemstoRepeater(mySelectedOptions); 
    });

    $w('#checkboxGroup3').onChange((event)=> {console.log(event.target.id+"-clicked!");       
        const mySelectedOptions = $w('#checkboxGroup3').value; 
        console.log(" mySelectedOptions ", mySelectedOptions);  
        addItemstoRepeater(mySelectedOptions); 
    });
});

function addItemstoRepeater(mySelectedOptions) {
    let dataQuery = wixData.query(DATABASE);

    if (mySelectedOptions.length>0) {
        dataQuery = dataQuery.hasSome(databaseField, mySelectedOptions);
        dataQuery.find().then((results)=> {            
            const filtereditemsReady = results.items;            
            $w('#repeater1').data = filtereditemsReady;
        });
    }
    else {
        console.log("No selected options found!!!");
    }    
    
}

depthrecords · May 26, 2022, 12:11pm

this is what I get when I run the console

CODE-NINJA · May 26, 2022, 3:15pm

I changed a little bit your code, since still some code-lines very strange!
Try this one…

Also found some more copy&paste-bugs made by my own…
Please check first the whole code, for any bugs or missing or wrong IDs or values.

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

///------------------------
let DATABASE =    'AdMe Database';
let dbField = [];
    dbField[0] = 'Ad Category';
    dbField[1] = 'Sex Category';
    dbField[2] = 'Age Category';

let mySelectedOptions = [];

$w.onReady(()=> {console.log("Page is ready...");
    // FIRST GETTING SOME DATA OUT OF Wix-Storage......
    var searchValue = local.getItem("searchWord");  

    // filling your searchbar with the memorized value....
    if(typeof searchValue === 'string') {
        $w("#searchBar").value = searchValue;
        $w("#searchBar").placeholder = searchValue;
    }

    $w('#searchButton').onClick(async(event)=> {console.log(event.target.id+"-clicked!"); 
        // starting the SEARCH-FUNCTION...after a click onto the SEARCH-BUTTON....
        let resData = await search(searchValue); 
        console.log("My RESULTS = ", resData);
    });

    $w('#checkboxGroup1').onChange((event)=> {console.log(event.target.id+"-clicked!");  
        let selectedCBG = (event.target.id).substring(event.target.id.length - 1); console.log(selectedCBG);     
        const mySelectedOptions = $w('#checkboxGroup1').value;        
        addItemstoRepeater(mySelectedOptions); 
        console.log(" mySelectedOptions ", mySelectedOptions);
    });
    
    $w('#checkboxGroup2').onChange((event)=> {console.log(event.target.id+"-clicked!"); 
        let selectedCBG = (event.target.id).substring(event.target.id.length - 1); console.log(selectedCBG);     
        const mySelectedOptions = $w('#checkboxGroup2').value; 
        console.log(" mySelectedOptions ", mySelectedOptions);       
        addItemstoRepeater(mySelectedOptions); 
    });

    $w('#checkboxGroup3').onChange((event)=> {console.log(event.target.id+"-clicked!");
        let selectedCBG = (event.target.id).substring(event.target.id.length - 1); console.log(selectedCBG);    
        const mySelectedOptions = $w('#checkboxGroup3').value; 
        console.log(" mySelectedOptions ", mySelectedOptions);  
        addItemstoRepeater(mySelectedOptions);
    });
});

// --------------- MY-FUNCTIONS -----------------------------------
function search(searchValue) {
    wixData.query(DATABASE).contains('fullName', searchValue)
    .or(wixData.query(DATABASE).contains('ad title', searchValue))
    .or(wixData.query(DATABASE).contains('country', searchValue))
    .or(wixData.query(DATABASE).contains('city / state / province', searchValue))
    .or(wixData.query(DATABASE).contains('price', searchValue))
    .find()
    .then((res)=> {console.log("FOUND-DATA after SEARCH-PROCESS: ", res);
        $w('#repeater1').data = res.items;
        return (res);
    }).catch((err)=>{console.log("ERROR: ", err);});
}

function addItemstoRepeater(mySelectedOptions, selectedCBG) {
    let dataQuery = wixData.query(DATABASE);
    if (mySelectedOptions.length>0) {
        dataQuery = dataQuery.hasSome(dbField[selectedCBG], mySelectedOptions);
        dataQuery.find().then((results)=> {console.log("ITEMS: ", results.items);            
            const filtereditemsReady = results.items;            
            $w('#repeater1').data = filtereditemsReady;
        });
    }
    else {console.log("No selected options found!!!");}   
}

Run your FILTER while monitoring the logs in console.

Something changed?

depthrecords · May 26, 2022, 4:33pm

I still get the same in console

depthrecords · May 26, 2022, 4:35pm

the search won’t work and nothing is coming up in the repeater from the collection.

CODE-NINJA · May 28, 2022, 9:15am

You still did not find solution ?
If so i would suggest to try completely without usage of DATASET, going just the wix-data-query-way.

Why using wix-data is the better option ?

DATASETs are binded to just one DATABASE (coded version can be binded to any)
Trying to help regarding a usage of a DATASETs in most cases are more complicated, because the helper do not see how is exactly the setup of the requester (including dataset-settings and connections).

These are just a few reasons why going the more coding way.

Of course DATASETS are not bad, but if you can not handle them, better you do not touch them. GO THE CODING-WAY.

By the way → The coding way is more FLEXIBLE one.

Topic		Replies	Views
Repeater and checkbox Ask the community code , question	4	397	March 23, 2022
Problems searching a repeater Ask the community code , question	6	144	July 5, 2020
How to filter a repeater by checkbox, then pass to new database through form Ask the community code , wix-forms , question	18	358	August 17, 2021
[Solved] Checkbox filtering code problems Ask the community code , wix-restaurants , question	3	133	June 9, 2022
I've been desperately trying to connect a multiple checkbox filter to a repeater as well as trying to get the search and research button Ask the community code , question	1	51	September 21, 2020

Need help with Checkbox repeater code!

Related topics