I have a “portfolio” page that is dynamically filtered by a dropdown that corresponds to a database field.
When I navigate to a project page, I want to be able to return to the portfolio page where the dataset is still filtered by the previous dropdown selection. (Right now the browser back button returns to the porfolio page with the dropdown at its default state of no filter.)
Does anyone have an idea?
See the Back Button example .
That kind of works, but can I do something to the dropdown so it can remember what it was on when the user left that page?
This is the user experience I’m looking for:
I found a few posts that I’m trying to put together. I’m basically attempting to set the session ‘value’ after a change event of the dropdown, then load that session data to set the dropdown next time the page loads. It doesn’t work as it is below.
export function dropdownMarkets_change(event) {
//Add your code for this event here:
session.setItem("key", "value");}
$w.onReady(function () {
//TODO: write your page related code here...
let value = session.getItem("key"); // defines "value"
$w('#dropdownMarkets').value
})
It won’t work as the dropdown change event is happening before the page is ready and you haven’t set a value for the dropdown itself or for the session set either.
Try it the other way around so that the page gets ready first and the page can get the value from storage and set the dropdown if required.
This is using Yisrael’s example, so see it working on this example here with a dropdown user input added to the first page.
https://givemeawhisky.wixsite.com/dropdownback .
You can use either the menu buttons or the go back button to switch between pages, once you have chosen a dropdown choice it will stay on that value.
Code used.
import wixWindow from 'wix-window';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
let previousPageURL;
let key = session.getItem('key');
$w.onReady(function () {
previousPageURL = session.getItem("page");
console.log(previousPageURL);
session.setItem("page", wixLocation.url);
$w("#btnBack").link = previousPageURL;
$w("#btnBack").target = "_self";
$w('#dropdownMarkets').value = key;
$w('#dropdownMarkets').resetValidityIndication();
});
export function dropdownMarkets_change(event) {
session.setItem('key', $w('#dropdownMarkets').value);
}
You need to have the resetValidityIndication added, otherwise each time you go back to the page with the dropdown on, it will be displayed as error and be shown in red.
Plus, note that it will show the dropdown placeholder text only on the first time that a user views the dropdown page, each time after that it will simply display the value saved into session storage.
If you don’t want that, then you will have to look into adding a session storage clear.
@givemeawhisky Thanks, this is working great!
It took me some time to plug it in correctly, but in the end I just had to ignore the errors that dropdown and back button didn’t exist and use it in the site tab rather than the page tab where the respective element lives.
Hi,
I feel thankful for this post and the sample site (https://www.grampsworkbench.com/Examples/Back-Button). I also needed the same function for my search page which has a dropdown and a search bar. I wanted to retain the user’s last search in both fields. So I added commands with #searchBar below the ones for #dropdown, as suggested by GOP.
I would like to add that this code on the global page wouldn’t work without some additional code on the search page itself.
First, you have to add
import { session } from ‘wix-storage’ ;
Second, you have to let the change function on this search page recognize about “key”. So I put in the last three lines in the curly bracket here.
export function searchBar _change ( event ) {
filter ( lastFilterKeywords , $w ( “#searchBar” ). value );
let key = session . getItem ( ‘key’ );
session . setItem ( “page” , wixLocation . url );
session . setItem ( ‘key’ , $w ( ‘#searchBar’ ). value );
}
If you have two export functions, in my case for the searchBar and the dropdown, you may have to use another parameter “key2” for the second input field so that the computer won’t get confused. (Maybe an expert can validate this)
This works successfully for me, as a result of trial and error.
It may be helpful for you too.
A newbie