setFilter for radio buttons

Ask the community
,
1

Hi, I’m looking to filter a table using multiple radio buttons and can’t seem to get this code working. I wan’t the user to choose different features and after each feature selection, it auto-scrolls to the next anchor (where the next feature selection is).

I’m trying the below code, but it’s not working (not filtering, not scrolling). Would appreciate any help.

import wixData from ‘wix-data’
$w.onReady( function () {
//TODO: write your page related code here…
});
export function radioGroup1_click(event) {
//Add your code for this event here:
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“Jewelry”,$w(“#radioGroup1”).value))
{$w(“#anchor2”).scrollTo()}}

2

Hi ar,
try to use this code:

import wixData from 'wix-data' $w.onReady(function () { //TODO: write your page related code here... }); 
export function radioGroup1_click(event) { //Add your code for this event here: $w("#dataset1").setFilter(wixData.filter() .contains("Jewelry",$w("#radioGroup1").value))
.then(()=>{
//when the code gets here your datafilter finished filtering the table
})
$w("#anchor2").scrollTo(); //page should scroll immediately to anchor2
}

If the dataset isn’t filtering the table try to check if the values of “Jewelry” and
$w(“#radioGroup1”).value) are correct, pay attention to the item field key in the database, maybe you should use “jewelry” instead of “Jewelry”

Gal.

3

Hi Gal, thank you for this response. I’ve managed to get the scroll to button working, but not the filtering part. I’ve got various radio buttons on my page and the final output is an image linked to the read-only table that I’m trying to filter on. Do you know what I should look into to make this work?

Thanks for your help!

4

The code from Gal should work for you if you have it setup correctly.

import wixData from 'wix-data'

$w.onReady(function () {
 }); 

export function radioGroup1_click(event) { $w("#dataset1").setFilter(wixData.filter() .contains("Jewelry",$w("#radioGroup1").value))
.then(()=>{
$w("#anchor2").scrollTo();
})
}
5

Just make sure that you pay attention to Gal’s final comment at the end of the post.

If the dataset isn’t filtering the table try to check if the values of “Jewelry” and
$w(" #radioGroup1 ").value) are correct, pay attention to the item field key in the database, maybe you should use “jewelry” instead of “Jewelry”

Note that the .contains() function looks for some words in a dataset field that you have specified in the first part of your code.

So, where I used it myself to search a music dataset for artist name…

 .contains('songName', $w('#songnameinput').value)

Also song name too…

 .contains('artistName', $w('#artistnameinput').value)

You will notice that all the specific fields are being added with lowercase at the start of them.

This is because you should be using the field KEY and not the field name and all dataset field keys begin with a lowercase and never with a uppercase letter.

6

I have tested it on a blank page and it works fine.

731×469 4.06 KB

927×666 7.2 KB

Code used on site

import wixData from 'wix-data'

$w.onReady(function () {
});

export function radioGroup1_click(event) {
$w("#dataset1").setFilter(wixData.filter()
.contains("jewelry", $w("#radioGroup1").value))
.then(() => {
$w("#anchor2").scrollTo();
})
}
7

If you add a table to that page and add more items from the radio button into the dataset on that page.

Added table and showing in preview mode…

882×597 4.83 KB

Then when you select the radio button choice and the page is moved down to where your anchor is, the table will be filtered to the users choice.

1017×656 3.89 KB

8

Hi Ar,
please read the great explanation that GOS provided.
i believe that if you follow his instructions carefully you will succeed.