set a filter from a different page

Ask the community
,
1

I’m trying to make the button onclick event transfer you to the page with the filters and a table on with the pre-set region filter selected to whichever button you have clicked. E.g. clicking africa on world map below would transfer you to dynamic page and the table will be set to filter for africa in the region data.

This is my home code and set up:

import {session} from "wix-storage";

export function Africa_click(event, $w) {
  session.setItem("region1", "Africa")
}

1126×447 128 KB

This is my code from the second page:

import {session} from "wix-storage";

$w.onReady(function () {
 let africa = session.getItem("region1");
  $w("#regiondropdown").value = africa
})

1126×447 21 KB

Can’t find code that redirects you to another page with sessions

2

Try changing your code slightly:

FIRST PAGE:
session.setItem(‘region1’, $w(‘#Africa’).value);
wixLocation.to(“/yourotherpage”);
//need to add wixLocation to your imports on this page

SECOND PAGE:
const regiondropdown = session.getItem(‘region1’);
$w(‘#regiondropdown’).value = regiondropdown;

3

Thanks whiskey!

I changed it slightly to add another text box hidden with the same writing in as the button doesn’t have a ‘value’ i could use.

For anyone interested here is finished code:

page 1:

import {session} from "wix-storage";
import wixLocation from 'wix-location';

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

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

page 2:

import {session} from "wix-storage";

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

@givemeawhiskey

Unfortunately it doesn’t work when i have multiple buttons. I redirects to the right page but doesn’t set the filter at all. I have the exact same code but repeated for each button but now I think I need to change the code on my 2nd page, however if i try and put them all under one ‘on ready function’ i cannot repeat the const function. as it only allows defining the regiondropdown once in each onready function. Should I change the const function to something else to allow them all uner the same onready function or keep them all separate and do something else?

I’ll show the examples again:

Page 1:

import {session} from "wix-storage";
import wixLocation from 'wix-location';

export function Africa_click(event, $w) {
 session.setItem('Africa', $w('#africatext').text);
 wixLocation.to("/volunteer-projects");
}
export function Europe_click(event, $w) {
 session.setItem('Europe', $w('#europetext').text);
 wixLocation.to("/volunteer-projects");
 }
export function Asia_click(event, $w) {
 session.setItem('Asia', $w('#asiatext').text);
 wixLocation.to("/volunteer-projects");
 }
export function Middleeast_click(event, $w) {
 session.setItem('Middle-East', $w('#middleeasttext').text);
 wixLocation.to("/volunteer-projects");
 }
export function Caribbean_click(event, $w) {
 session.setItem('Caribbean', $w('#caribbeantext').text);
 wixLocation.to("/volunteer-projects");
 }

1126×447 158 KB

PAGE 2:

import {session} from "wix-storage";

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

$w.onReady(function () {
 const regiondropdown = session.getItem('Europe');
 $w('#regiondropdown').value = regiondropdown
})

$w.onReady(function () {
 const regiondropdown = session.getItem('Asia');
 $w('#regiondropdown').value = regiondropdown
})

$w.onReady(function () {
 const regiondropdown = session.getItem('South-East Asia');
 $w('#regiondropdown').value = regiondropdown
})

$w.onReady(function () {
 const regiondropdown = session.getItem('Middle-East');
 $w('#regiondropdown').value = regiondropdown
})

$w.onReady(function () {
 const regiondropdown = session.getItem('Caribbean');
 $w('#regiondropdown').value = regiondropdown
})
5

@duncanmaguire

On page two, you can’t have onReady multiple times, it should only be listed after the imports at the start of the code.

Have a read of onReady here:
https://www.wix.com/corvid/reference/$w.html#onReady

The rest of your code on page two should be something like this:

import {session} from 'wix-storage';

$w.onReady(function () {

    const title2 = session.getItem('title');
    const price2 = session.getItem('price');
    const class2 = session.getItem('class');
    const days2 = session.getItem('days');

    $w('#title2').text = title2;
    $w('#price2').text = price2;
    $w('#class2').text = class2;
    $w('#days2').text = days2;

});

The trouble that you’ve got is that on page two you are trying to populate the dropdown with the code from session storage, which would work in normal practice.

However, with your code that dropdown value could be any of the options as they are all called regiondropdown.

So yes, it might redirect to the right page from the code on page one, however when it comes to page two, it can’t give a correct value as all of them are the same value.

See in my example code above for page two, each session get item value is for a different option, so that it has a definite answer to put as the value.

You can go down a long and boring route with setting up multiple dropdowns that are overlayed with each other and called say regiondropdown1, regiondropdown2 etc which correspond with each region, so Africa = regiondropdown1 etc.

Then on page two, you can have all the regiondropdowns set up as hidden on load and set to be only shown when the corresponding region was clicked on page one.

So, when Africa is clicked on page one, then when page two loads the regiondropdown1 is shown with the value shown as Africa.

The other option would be to just dispose of having it as a dropdown value and have it setup as a simple text element that just displays the value of the region button that was clicked on page one.

If you wanted, you can still keep the existing region dropdown so that it is still usable for your search on page two, just not have it connected to the sessions storage from page one, instead keeping it all within the data query of the search.

6

@givemeawhisky ah i see what you mean. Thanks for the idea bu the multiple dropdowns could get confusing as i want the user to be able to reuse the dropdown if needed. I will leave it as it is and going to connect them to just text. As it is searching the database, it needs to be in a user input text box, or can i query or ‘search’ the table without having a user input.
I’ve written a bunch of code for different ways and am confusing myself now.

i tried using user input textbox. This is like a search bar. The problem is i am trying to connect all the buttons on page 1 to the same user input element on page 2. So that doesn’t work.

I now am trying to query the table and the database its connected to by using hidden textboxes on the page e.g. africa, asia… Then the table will automtically filter the table depending on the button clicked in page 1. I like this more but i am finding it difficult. I have done this so far:

 $w.onReady(function () {
 
 const africatext = session.getItem('Africa');
  
 return wixData.query ('#dataset1').setFilter(wixData.filter()
    .find('africatext')
    .then( (result) => {
      $w("#table1").expand();
    } )
    );

it’s not working but i like this idea more!

7

if you are using setFilter then it is used on the dataset itself like this:
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#setFilter

You can’t have the data query mixed in with it:
https://www.wix.com/corvid/reference/wix-data.html#query

8

@givemeawhisky

so im focussing on what i know: setfilter, as query is backend stuff and it just isn’t working for me.

I’m making hidden on load user text input boxes e.g. ‘africabox’ that will insert the value from p1 and then filter the table. The onchange event handler doesn’t seem to work with text input. I assume it on wo But there are no other even handlers i can use as you need to manually click/hover over them etc. to activate that event.

The difficulty im having here is that i cant run a filter event automaically on p2 when the field is filled in from the data carried across from p1. If there was a way the get session on p1 could act as an onlclick event on p2 i could add hidden buttons e.g. ‘africabutton’ but again i don’t think that is possible.

Is there a way for the onchange event to filter the region part of my dataset?

Just wanted to say thanks for the help so far, I really appreciate it.

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


export function africabox_change(event) {
    console.log("filtering items to africa")

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