I want to filter data shown with checkboxes. With the ability to have multiple selections at once. I have a repeater showing data from a database. I know code but don’t know where to start.
You know the CODE but do not know where to start very strange statement😁
Where to start?
-
First creating and designing your form.
-
Inserting and implementing all element-functions.
-
Write some code.
-
How to work with checkboxes…
(i don’t have real corresponding example to this case, but similar ones, which could help to understand how to work with this element…
https://russian-dima.wixsite.com/meinewebsite/blank-13
and here…
https://russian-dima.wixsite.com/meinewebsite/blank-13
-
How to work with Filter…
https://russian-dima.wixsite.com/meinewebsite/blank-3 -
And how to work with repeater, but this step will be your last one.
First do the first and sexond step.
I have my checkboxes set up, I just don’t know the code to make them work. I have items I need to filter only when their checkbox is selected. I’m not sure what those examples you provided are for…
I’m not sure what those examples you provided are for…
I thought, you wanted to filter something?
One of my examples show you how to work with the filter.
I have items I need to filter only when their checkbox is selected
The other examples shows how to work with checkboxes.
You have to combine the both methods to get your aim.
You can also take a look into the CORVID-API, if my examples do not help you.
https://www.wix.com/corvid/reference/api-overview/introduction
@russian-dima I am trying to filter my dataset using checkboxes, not a dropdown. I need to filter out certain items based on the value selected in the checkbox. I believe you were using a dropdown for that.
This is what I’m working with. I was using a dropdown but want multiple collections to viewed at once. For example, if I only want to view the Austin and Indi collections. This is a dynamic page with a repeater connected to a dataset.
There are a lot of resources for this on the forum! Here are a few I found that should be useful to you.
https://www.wix.com/corvid/forum/tips-tutorials-examples/example-multiple-groups-filter
This is great! Thanks! Unfortunately its not working as expected.
$w("#checkboxCollection").onChange( (event, $w) => {
filterView();
});
$w("#checkboxRoom").onChange( (event, $w) => {
filterView();
});
function filterView(){
var collectionFilter = $w("#checkboxCollection").value
var roomFilter = $w("#checkboxRoom").value
console.log('collection', collectionFilter);
console.log('room', roomFilter);
$w("#dataset1").setFilter( wixData.filter()
.hasSome("Collection", collectionFilter)
.hasSome("Room", roomFilter)
)
This is my modified code, any idea why it wouldn’t work? Here’s a screenshot for context:
@mordyeps Is this the full code you have for the page? If you’re following this example you’re missing some key elements, such as the .then() and importing the wix-data module.
This is the full example code that you should modify to your element IDs:
import wixData from 'wix-data';
$w.onReady(function () {
filterView();
$w("#checkboxGroup1").onChange( (event, $w) => {
filterView();
});
$w("#checkboxGroup2").onChange( (event, $w) => {
filterView();
});
});
function filterView(){
var typeFilter = $w("#checkboxGroup1").value
var lightFilter = $w("#checkboxGroup2").value
console.log('type', typeFilter);
console.log('light', lightFilter);
$w("#dataset1").setFilter( wixData.filter()
.hasSome("type", typeFilter)
.hasSome("light", lightFilter)
)
.then( () => {
let count = $w("#dataset1").getTotalCount();
if(count === 0){
$w("#group1").show();
}else{
$w("#group1").hide();
}
} )
.catch( (err) => {
console.log(err);
} );
}
@lmeyer Well, my full code includes other page elements. I’ll provide it and try to use the previous code.
import wixWindow from 'wix-window';
import wixData from 'wix-data';
$w.onReady(function () {
let mode = $w("#mainMedia").fitMode; // "fixedWidth"
$w("#mainMedia").fitMode = "fit";
filterView();
$w("#checkboxCollection").onChange( (event, $w) => {
filterView();
});
$w("#checkboxRoom").onChange( (event, $w) => {
filterView();
});
});
export function container1_viewportEnter(event) {
if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
if($w("#title").hidden){
$w("#title").show();
}
}
}
let slideOptions = {
"duration": 100,
"delay": 50,
"direction": "top"
};
let fadeOptions = {
"duration": 500,
"delay": 20
};
export function container1_mouseIn(event) {
let $repeaterData = $w.at(event.context);
$repeaterData('#title').show("slide", slideOptions);
}
export function container1_mouseOut(event) {
let $repeaterData = $w.at(event.context);
$repeaterData('#title').hide("fade", fadeOptions);
}
export function loadingstrip_viewportEnter(event) {
$w("#loadinggif").show(); //This is your GIF or animated image
$w("#dataset1").loadMore() //This is your dataset
.then(() => {
$w("#loadinggif").hide(); //This is your GIF or animated image
console.log("Done loading more data");
});
}
function filterView(){
var collectionFilter = $w("#checkboxCollection").value
var roomFilter = $w("#checkboxRoom").value
console.log('collection', collectionFilter);
console.log('room', roomFilter);
$w("#dataset1").setFilter( wixData.filter()
.hasSome("Collection", collectionFilter)
.hasSome("Room", roomFilter)
)
.then( () => {
let count = $w("#dataset1").getTotalCount();
if(count === 0){
$w("#group1").show();
}else{
$w("#group1").hide();
}
} )
.catch( (err) => {
console.log(err);
} );
}
@mordyeps Makes sense! I would double check:
- That the database Field Keys in this section (“Collection” and “Room”) are exactly as they appear in your database, with matching capitalization (example, “Collection” and “collection” are seen as different)
$w("#dataset1").setFilter( wixData.filter()
.hasSome("Collection", collectionFilter)
.hasSome("Room", roomFilter)
)
- All the element IDs. The example includes the element “#group1” which is an error message, is that how it is on your page?
Is this what you wanted to do?
https://russian-dima.wixsite.com/meinewebsite/checkbox-filter
import wixData from 'wix-data';
$w.onReady(function () {
$w("#checkboxCollection").onChange(() => {filterView();});
$w("#checkboxRoom").onChange( (event, $w) => {filterView();});
});
function filterView(){
let collection = $w("#checkboxCollection").value
let room = $w("#checkboxRoom").value
console.log('collection', collection);
console.log('room', room);
$w("#dataset1").setFilter( wixData.filter()
.hasSome("collection", collection)
.hasSome("room", room)
)
.then( () => {let count = $w("#dataset1").getTotalCount();})
.catch( (err) => {
console.log(err);
} );
}
Now you have an example 