Filter with checkboxes

Ask the community
,
1

Hey,
I want to add a filter to my webite. Here’s the code I use:

$w.onReady(() => {
    $w('#dataset1').onReady(() => {

        $w('#checkbox1 , #checkbox2').onChange(() => {
            search();
        })

 function search() {
 let filter = wixData.filter();
 let filterCheckbox1 = $w("#checkbox1").checked;
 let filterCheckbox2 = $w("#checkbox2").checked;

 if (filterCheckbox1 ) {
                filter = filter.eq("boolean1", true)
            }

 if (filterCheckbox2 ) {
                filter = filter.eq("boolean2", true);
            }

            $w('#dataset1').setFilter(filter)
        }

    })
})

The code works, but only for 1 checkbox. If I check 2 checkboxes I get no results.

How can I change the code, that I can see all results from “boolean1” and “boolean2” ?

Thanks for your help :grinning:

2

Hello Nick,

take a look at this example here…
https://russian-dima.wixsite.com/meinewebsite/blank-3

function start_Filter (parameter) {
    let filter =  wixData.filter()  
    let myKategory = $w('#dropdown1').value
    let myTutorial = $w('#dropdown2').value
 
    if ($w('#dropdown1').value!=0) {filter = filter.eq('kategorie', myKategory);}
    if ($w('#dropdown2').value!=0) {filter = filter.eq('tutorialLevel', myTutorial);}
    $w('#dataset1').setFilter(filter)
}

It will help you to understand how to set multiple filter.

EDIT: Try this one…

function search() {
 let filter = wixData.filter();
 let filterCheckbox1 = $w("#checkbox1").checked;
 let filterCheckbox2 = $w("#checkbox2").checked;
 let filterCheckbox3 = $w("#checkbox3").checked;
 let filterCheckbox4 = $w("#checkbox4").checked;
 let filterCheckbox5 = $w("#checkbox5").checked;

 if (filterCheckbox1 ) {filter = filter.eq("boolean1", true);}
 if (filterCheckbox2 ) {filter = filter.eq("boolean2", true);}
 if (filterCheckbox3 ) {filter = filter.eq("boolean3", true);}
 if (filterCheckbox4 ) {filter = filter.eq("boolean4", true);}
 if (filterCheckbox5 ) {filter = filter.eq("boolean5", true);}
 
    $w('#dataset1').setFilter(filter)   
})
3

Thanks, but this code has the same problem.

If I check " checkbox1 " and " checkbox2 ", the code filters all that have " boolean1 " and " boolean2 " on true in the database.

I need a code who shows me all results that have " boolean1 " or " boolean2 " checked in the database.

4

Ok, now i understand you.

I need a code who shows me all results that have " boolean1 " or " boolean2 " checked in the database.
Would a table suffice for this purpose or what do you need the data for?
If YES —> just connect a table to your dataset. It will show the results.
And you even do not need any code for it.

If NOT —> then you can do it like here in this example.

You just have to call “getItems()” again, after you have setted and ran your filter.

Create a button on your page —> “button1” and give it an “onClick-EventHandler”

export function button1_click(event) {show_results()}

And add this code here to your page…

function show_results (parameter) {
    $w("#dataset1").onReady( () => {       
        $w("#dataset1").getItems(0, $w("#dataset1").getTotalCount())
        .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let firstFilteredItem = items[0]
 let lastFilteredItem = items[totalCount]

            console.log(result)
            console.log(totalCount)
            console.log(firstFilteredItem)
            console.log(lastFilteredItem)
        })
    })
}

Take a look at the CONSOLE-LOGs (Press F-12 in your google-chrome-browser and go to CONSOLE, or look at teconsole in the “Preview-Mode” in your Wix-Editor).

What do you get? (You should get the FILTERED-DATA!)

EDIT:

So in your case, it would be something like this here…

function search() {
 let filter = wixData.filter();
 let filterCheckbox1 = $w("#checkbox1").checked;
 let filterCheckbox2 = $w("#checkbox2").checked;

 if (filterCheckbox1 ) {filter = filter.eq("boolean1", true);}
 if (filterCheckbox2 ) {filter = filter.eq("boolean2", true);}
 
    $w('#dataset1').setFilter(filter)  
    show_filterResults() 
})

function show_results (parameter) {
    $w("#dataset1").onReady( () => {       
        $w("#dataset1").getItems(0, $w("#dataset1").getTotalCount())
        .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let firstFilteredItem = items[0]
 let lastFilteredItem = items[totalCount]

            console.log(result)
            console.log(totalCount)
            console.log(firstFilteredItem)
            console.log(lastFilteredItem)
        })
    })
}

EDIT: Sorry there was still a little bug in my code…

let lastFilteredItem = items[totalCount] <<<--- BUGGY

let lastFilteredItem = items[totalCount-1] <<<--- works!

Here the whole code one more time…

export function button4_click(event) {show_results(), $w('#BOXfilterresults').show('FadeIn')}


function show_results (parameter) {
    $w("#dataset1").onReady( () => {    
        $w("#dataset1").getItems(0, $w("#dataset1").getTotalCount())
 
        .then( (result) => {
 let items = result.items
 let totalCount = result.items.length
 let firstFilteredItem = items[0]
 let lastFilteredItem = items[totalCount-1]
 
            console.log(result)
            console.log(totalCount)
            console.log(firstFilteredItem)
            console.log(lastFilteredItem)

            $w('#TXTtotalcount').text = totalCount.toString()
            $w('#TXTfirstitem').text = firstFilteredItem.title.toString()
            $w('#TXTlastitem').text = lastFilteredItem.title.toString()
        })        
    })
}

You can see this CODE working here in this example. I have added this function into the FILTER-example.

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

1181×768 61.2 KB

5

Hey,
thanks for your answers and for your time!

The problem I have is this:

If I have checkbox1 checked, the filter works. Same for checkbox2.

702×438 88.3 KB

But if both checkboxes are checked, I get no results.

1101×247 4.1 KB

The filter should show me all results, from checkbox1 and checkbox2.

6

Then perhaps this one… (not tested)

function search() {
 let filter = wixData.filter();
 
 if ($w("#checkbox1").checked===true) {filter = filter.eq("boolean1", true);}
 else if ($w("#checkbox1").checked===true) {filter = filter.eq("boolean2", true);}
 
 else {}
 
    $w('#dataset1').setFilter(filter)   
})

I think this will also not work.

I do not know if this issue can be solved by using a filter.
If you want to collect all the boolean-values with the value=“true” then you can make a if-query which will put all the “true”-valued inputs into an ARRAY —> [ ]

if ($w("#checkbox1").checked===true) {
let newValue = .... define the new founded value here ....
myArray = myArray.push(newValue)}

At the end you should then have something like...

myArray -----> [boolean1a, boolean1b, boolean4a, boolean7b]
The array collects all the TRUE-checked values from database