delay get session for onchange event

Ask the community
,
1

I want to filter a dataset on page number 2 from a button on p number 1. The button on p1 triggers an onchange event on p2 that then filters the dataset. My problem is that the onchange event happens before the page is loaded and it doesn’t filter the dataset,as it doesn’t register the change that has happened in the dropdown (where the onchagne event occurs). I think this is to do wit my use of onready function? How do i delay the onchange event to after the page has loaded?

code for p1:

export function Africa_click(event, $w) {
 session.setItem('Africa', $w('#africatext').text);

 wixLocation.to("/volunteer-projects");
}

code for p2:

$w.onReady(function () {
 const regionafrica = session.getItem('Africa');
 
 $w('#dropdownafrica').value = regionafrica
})

export function dropdownafrica_change(event) {
$w('#dataset1').setFilter(wixData.filter().contains("region", "Africa"))

     .then((results) => {
         console.log("Dataset is now filtered");
     }).catch((err) => {
         console.log(err);
     });
     $w("#table1").expand();
}
2

You shouldn’t filter it onChange i this case.
You can push the value to the dropdown just so the user will see it, but set the actual in the page onReady. No need to do it on change.

3

i dont want the user to see it. Im hiding the dropdown element as i just want them to see the filtered dataset, automatically filtered.

I was going to have it another way where they push the value into the dropdown and then press a search button ‘onclick’ event. But i would rather it happen automatically when the page loads

4

@duncanmaguire so why do you need a dropdown at all?

5

@jonatandor35 I just need a way to trigger filtering the dataset when they are redirected to p2, onchange seems like the only option as all others require the user to interact with the element in some way to trigger the filtering event

6

@duncanmaguire you don’t need a dropdown and you don’t need onChange.
Just run the setFilter() function with the value you retrieved.

7 
import {session} from 'wix-storage';
$w.onReady(function () {
 const regionafrica = session.getItem('Africa');
 $w('#dataset1').setFilter(wixData.filter().contains("region", regionafrica))
     .then((results) => {
         console.log("Dataset is now filtered");
     }).catch((err) => {
         console.log(err);
     });
})
8

@jonatandor35 Ill try it out thanks, I have many regions to repeat the same code for and I thought the code would get confused if there are multiple getItem session. Give me 10 mins!

9

@jonatandor35 it works great with just one const but when i start to add the other regions it doesnt work.The buttons on p1 all give the result Africa in the dataset. I click ‘asia’ on p1 and it filters ‘africa’ on p2. Any ideas around this? This is much simpler and cleaner way of filtering but I get stuck at the last hurdle!

$w.onReady(function () {
 const Africa = session.getItem('Africa');
 $w('#dataset1').setFilter(wixData.filter().contains("region", "Africa"))
     .then((results) => {
         console.log("Dataset is now filtered");
     }).catch((err) => {
         console.log(err);
     });

 const Asia = session.getItem('Asia');
 $w('#dataset1').setFilter(wixData.filter().contains("region", "Asia"))
     .then((results) => {
         console.log("Dataset is now filtered");
     }).catch((err) => {
         console.log(err);
     });

})
10

@jonatandor35 I could fix it by making multiple pages and each page filters the dataset for that region clicked. it’s a bit annoying but not too bad

11

@duncanmaguire I’m not sure what you’re trying to do

12

Try this

$w.onReady(function () {
 const regionafrica = session.getItem('Africa');
 
 $w('#dropdownafrica').value = regionafrica;
 $w('#dataset1').setFilter(wixData.filter().contains("region", regionafrica));
})
export function dropdownafrica_change(event) {
 $w('#dataset1').setFilter(wixData.filter().contains("region", event.target.value))
}

Or something like that :slight_smile:

13

That’s not going to work…

14

@jonatandor35 ok

15

thanks for the help guys. I’ve sorted it by making lots of different pages… i actually like how it turned out.

@J.D. this is what i was trying to do in case you were wondering. The map below is p1. depending on the button you click it links to p2 (all linked to same p2) and filter the dataset automatically depending on which button you pressed. It basically filters the region collumn of the dataset and shows relevant projects. See below for p2.

p1:

1126×447 158 KB

p2:

1126×543 38.4 KB

16

OK. I don’t see why you had to create many pages, it’s much easier and faster to make a general page. but if it works for you…

17

@jonatandor35 I’ve struggled to make it work! I ran into trouble last week. Ended up trying to use wix query which i never used before and just messed up my code. I can’t find a way to filter p2 with p1, if p1 has multiple buttons with potential to push a value

18

@duncanmaguire Basically all you had to is:

$w("#Africa, #Asia, #America, #Europe").onClick((event) => {
    let selectedArea = event.target.id; //this is the property  name of the clicked button
    session.setItem("selectedArea", selectedArea);
    wixlocation.to("/page");
})