Link from dropdown menu to change state on another page?

Ask the community
,
1

Hello, I have a drop down menu on a page that is already setup to link to another page when something is selected. I would like for the selection to go to the correct page, and then change the state of the multistate box on that page.

    $w("#hou100dropdown").options = [
        { "label": "101 | What is a Mortgage?", "value": "/101" },
        { "label": "102 | Downpayments Explained", "value": "/101#02" },
        { "label": "103 | Credit Scores", "value": "/101#03" },
    ];

export function hou100dropdown_change(event) {
 let gotoUrl = $w("#hou100dropdown").value;
    wixLocation.to(gotoUrl);

}

When I select an option in the drop down menu, it automatically goes to the page /101, but I would like for it to change the state as well. Is this possbile?

Thank you.

2

@daneanar You could utilize the wix-storage API to store the state in the page with the dropdown, and then in the onReady of the page with the multistate box, apply the state. If the label of the dropdown is the actual name of the state on the other page, it would go like this:

import {session} from 'wix-storage';
export function hou100dropdown_change(event) {
    session.setItem("state", $w("#hou100dropdown").label);
    let gotoUrl = $w("#hou100dropdown").value;
    wixLocation.to(gotoUrl);
}

Then on the page with the multistate box:

import {session} from 'wix-storage';
$w.onReady(function () {
    let state = session.getItem("state");
    $w("#statebox").changeState(state);
});
3

Where you specify “state”, is that the name of the state on the multistate box?

So if my states are all labeled 01, 02, 03, etc then the code should be

import {session} from 'wix-storage'; 
export function hou100dropdown_change(event) {
    session.setItem("01", $w("#hou100dropdown").label);
    let gotoUrl = $w("#hou100dropdown").value;
    wixLocation.to(gotoUrl);
    }

am I following you correctly? Thank you!

4

The changeState function does use the name of the state on the multistate box. The easiest thing to do would be to have the labels of the dropdown exactly correspond to the names of the various states in the multistate box on the other page. If you can’t or don’t want to do that, then you will have to convert with some javascript code.

5

@tony-brunsman oof. Thank you for explaining that. Looks like it might be a little bit too much. I’ll play around with this code, thank you!!!

6

All you have to do is…

  1. Save your value to the wix-storage before you leave your current page (like Anthony already mentioned the “Session-storage”. The same way you could also use “local” instead.
  2. Then you navigate relaxed to the next page.
  3. On the following page you just have to load the value ($w.onLoad) from the wix storage, which you have saved before.

Et voilà! You have changed the page and you have still your value.

7

Hey! I need to do something similar and can’t solve it. I have a radio button that shows in all pages and depending on what value is selected it connects one or other database item to text objects. It’s a currency converter that changes between 2 currencies stored in a database (I can’t use the currency converter app cause my product and collection pages are dynamic where the standart currency app doesn’t work). Clicking the radio button and changing currency works perfectly, but what I can’t solve is for the radio button selection to remain the same when you change/reload page. It shows in all pages . Also i’m not sure how it would work, cause now my code is On change. And when I achieve that the radio button selection mantains across session, I still would need some kind of On load trigger cause the user wouldn’t click the radio button again for the On change event to work.
Do you think there a way in which I could achieve this?
Thanks,
Eugenia

8

@eugeniagarat
-You have different pages where you want to get data automaticaly from ?
a) saved options inside a database
b) saved options in (session/local/…)

Let’s say you have a switch, an options-button, or like in your case a radio-button (radio-button-group), where you can make your options-choice.

  1. option-A
  2. option-B

Like you already have recognized, your selected options get lost, every-time you change the page (what is absolutely normal).

So how could look like a solution for your problem ?

Using WIX-STORAGE…
Wix-Storage offers you 3-different types of MEMORY…

2405×595 65.3 KB

Decide on your own which one would fit your needs best.

Lets say, you are on PAGE-A and you do some option-change, by switching your radio-button-choice from VALUE-A to VALUE-B. For that moment your filter (or what ever engine) would work on your current selected page. But would stop working when you switch your page.

And here the MEMORY-FUNCTION comes into place…now we will save data into WIX-STORAGE…
https://www.wix.com/velo/reference/wix-storage

import {local} from 'wix-storage';

let mySelectedValue = "VALUE-B";
//saving data into wix-storage, using a special key....
local.setItem("key1", "value");

Now you have setted an value into the wix-storage.

WHAT NEXT ???

Let’s jump to PAGE-B !!!
What should now happen on PAGE-B ?
Yes, you want an AUTOMATIC change of your selected value, which already was done on PAGE-A —> (you selected VALUE-B), now on PAGE-B, you also should see VALUE-B.

But how ?
Let us load the value automaticaly inside onReady…

import {local} from 'wix-storage';

let myValue = local.getItem("key1"); console.log(myValue);

+onReady()…

import {local} from 'wix-storage';

$w.onReady(()=>{console.log("Page-B is ready now.....)
    let myValue = local.getItem("key1"); console.log(myValue);
});

Now, you can use your new value, which you got from MEMORY (wix-storage) and use for what ever you want.

The same way, all this would work, with an additional separated OPTIONS-DATABASE.

9

@russian-dima Thank you very much! It worked!