Removing repeater filter with switch

Ask the community
,
1

I have a repeater that displays user inputs. I have it set currently to where you can filter the results by clicking one or two switches. Is there a good way that after they click the switch, they can click it a second time and remove that specific filter? The code I am working with is:

import wixData from ‘wix-data’;

$w.onReady( function () {
$w(“#eventVideo”).onClick(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“eXvideo”, $w(“#eventVideo”).value));
});
});

$w.onReady( function () {
$w(“#eventPhoto”).onChange(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“eXvideo”, $w(“#eventPhoto”).value));
});
});

any help would be greatly appreciated

2

First of all, you don’t need 2 onReady functions on the same page, you can put everything inside a single onReady().
Second, It would help if you added some details about the switch .
Is it a button? a slider? a checkbox? a dropdown?

3

Thanks J.D. for the fast reply. It is a slider that they can select and there will be more sliders as I go but for now just the two. How would the code look for them to be in the same onReady function?

4

I think I have all on ready functions in the same onReady () but am still trying to figure out how to unfilter the data if the switch is clicked a second time. here is my updated code, it is working so far but am I doing it correctly?
import wixData from ‘wix-data’;

$w.onReady( function () {
$w(“#eventVideo”).onClick(() => {
($w(‘#eventVideo’).checked)
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“eXvideo”, $w(“#eventVideo”).value)); }
);
$w(“#eventPhoto”).onChange(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“eXvideo”, $w(“#eventPhoto”).value));
});
$w(“#stateDropdown”).onClick(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“state”, $w(“#stateDropdown”).value));
});
});

5

I’m still not sure what kind of switch you’re using. Can you upload a screenshot?

6

1366×768 234 KB

So I found with that last code string it would create an additional filter each time, it would create a new filter and loose the old one so I am back to the drawing board on this. What I want is they can toggle the switch and the filter goes on, toggle it again and it goes off. Next switch same thing but all filters apply when the switches are on. Is that possible?

7

It is. But you still didn’t provide enough data.
If both toggles are on, what should be the result? (remove all filters, and show all events?)
if both toggles are off, what should be the results? (filter everything out and show nothing?)
What kind of values are there in your “eXvideo” field (examples please)?
You should write a detailed explanation. Don’t assume we can guess your intentions.

8

@jonatandor35 When someone clicks the eXvideo I want only the resumes that have video in the eXvideo filed in the dataset to appear. When they toggle it again so its collapsed I want that filter removed. When the toggle the next toggle (event photo) I would like to filter based on eXphoto and show resumes that have photo in the eXphoto field to show up. So if you clicked Photo Experience, only people with photo experience are shown, if you clicked both photo and video toggles, only people with both photo and video would show up.

9

@doughammack are the value in eXvideo and eXphoto booleans (i.e. false/true)?

10

@jonatandor35 Yes they are. The field is populated from a user input form. When they check the input it puts the value into the field so it has to be the value we assigned. So, for eXvideo the only two things that can be in the field are either Video or its blank, for eXphoto it can only be photo or empty

11

@doughammack If I got you correctly, each of the fields eXvideo and eXphoto os always either empty or not empty. and the State filter is mandatory (the user always has to select a state).
In that case you can use the following code:

import wixData from 'wix-data';
$w.onReady(function () {
$w('#eventVideo, #eventPhoto, #stateDropdown').onChange((event) => {
 setFilter()
})
});
function setFilter(){
 if(!$w('#eventVideo').checked && !$w('#eventPhoto').checked){
        $w("#dataset1").setFilter( wixData.filter()
        .eq("state", $w('#stateDropdown').value)
)
    } else if($w('#eventVideo').checked & $w('#eventPhoto').checked){
$w("#dataset1").setFilter( wixData.filter()
  .isNotEmpty("eXvideo")
  .isNotEmpty("eXphoto")
  .eq("state", $w('#stateDropdown').value)
)
}else if($w('#eventVideo').checked){
  $w("#dataset1").setFilter( wixData.filter()
  .isNotEmpty("eXvideo")
  .eq("state", $w('#stateDropdown').value)
  );
} else {
  $w("#dataset1").setFilter( wixData.filter()
  .isNotEmpty("eXphoto")
  .eq("state", $w('#stateDropdown').value)
  )
}
}
12

@jonatandor35 This is great! If I want to add a third filter how would I insert that into this code? I tried adding it after
else if ($w(‘#eventVideo’).checked & $w(‘#eventPhoto’).checked){
$w(“#dataset1”).setFilter( wixData.filter()
.isNotEmpty(“eXvideo”)
.isNotEmpty(“eXphoto”)
.eq(“state”, $w(‘#stateDropdown’).value)

by adding
import wixData from ‘wix-data’;
$w.onReady( function () {
$w(‘#eventVideo, #eventPhoto, #thermalImaging’).onChange((event) => {
setFilter()
})
});
function setFilter(){
if (!$w(‘#eventVideo’).checked && !$w(‘#eventPhoto’).checked && !$w(‘#thermalImaging’).checked ){
$w(“#dataset1”).setFilter( wixData.filter()
)
} else if ($w(‘#eventVideo’).checked & $w(‘#eventPhoto’).checked) & $w(‘#thermalImaging’).checked {
$w(“#dataset1”).setFilter( wixData.filter()
.isNotEmpty(“eXvideo”)
.isNotEmpty(“eXphoto”)
.isNotEmpty(“thermalImaging”)

but it said the 2nd was an unexpected token &

I took the state part out to debug since that is strait forward.

13

@doughammack You deleted part of the line (the else if) and broke the correct syntax. But in any case you should plan the new logic carefully, and not just add an item to each row. Now you have more combinations to consider.

14

Maybe this code will be easier read, even though it might work a little bit slower:

import wixData from 'wix-data';

$w.onReady(function () {
 let a, b, c;
$w('#eventVideo, #eventPhoto, #stateDropdown, #thermalImaging').onChange((event) => {
  $w('#eventVideo').checked ? a = "eXvideo": a = "_id";
  $w('#eventPhoto').checked ? b = "eXphoto": b = "_id";
  $w('#thermalImaging').checked ? c = "thermalImaging": c = "_id";
 setFilter(a,b,c);
})
});
function setFilter(a,b,c){
 
$w("#dataset1").setFilter( wixData.filter()
  .eq("state", $w('#stateDropdown').value)
  .isNotEmpty(a)
  .isNotEmpty(b)
  .isNotEmpty(c)
)
}
15

@jonatandor35 THANK YOU THANK YOU THANK YOU! This is exactly what I was trying to do! Thank you very much for your help!