Nextjs - back button with an explore/filter page - next.js

I have an /explore page allowing the user to filter product iD based on different select (category, type). It works via building (firestore) query parameters dynamically based on the selected values. The results are shown on that same /explore page.
If a user clicks on a product, it opens a dynamically generated page and everything works well. However, while clicking the back button it goes back to the /explore page with the default values/query (not the ones with the previous query).
Example :
Default /explore showing all the sneakers
user applies filters for brand and color => it triggers a dynamically generated query and renders it on /explore
user clicks on one specific sneaker
user clicks on the back button and lands on Default /explore (without the queries)
However, I would like the user to land back on the /explore with brand and color filters...
Any ideas on how to do that ?
Thanks,
Max

Related

Is it possible to persist Drive Picker widget settings across pages?

I have 2 pages in my app. Page 1 allows the user to select a pupil and then the app shows Page 2.
On Page 2 I have a Drive Picker widget that allows the user to choose images that will be copied to a specific folder (depends on what was selected on Page 1).
If the user closes the picker on Page 2 after picking files and then opens it again without visiting Page 1 first, the Drive Picker remembers which specific folder they had navigated to and allows them to continue.
If the user visits Page 1 again first to select a different pupil and then comes back to Page 2 and uses the Picker, it seems as if the Picker gets reset and shows the user the root of their Drive again. I want to avoid this behaviour so that the user can continue to select files from their last visit (in the same session) to Page 2.
Is there anyway to access the last visited folder of the picker and store that say in a page property and then make the picker use that property the next time it is opened?
I have become a little confused as well with the options that are available to the widget and the options that are surfaced through the result object. I confess that I've tried to search stack overflow for more information on how to use result object, but cannot surface much so all of my scripts use the widget.selectedDocuments way.
You can use sessionStorage() to keep variables between pages.
It is a client side function and does not support "custom action" as far as i know, but the following functions can fix that.
function get_ss(name){return sessionStoreage.getItem(name);}
function set_ss(name, val){sessionStorage.setItem(name, val);}
when navigating from page 1 you can use a custom action to get pupil and set it in sessionStorage then navigate to page2
"Custom Action=" set_ss("pupil", app.pages.Page1.decendents.PupilName.value); app.showPage(app.pages.Page2); //going from memory on the navigation code
You can add "var pupil = get_ss("pupil");" where ever you need it from there.

Prevent user from creating an event unless a certain word is in the title full calendar

I wanted to allow the user to only create events if they include a certain variety of words, e.g the selection of available words would be Sarah, Kate, and Helen, and if the user typed in Joe then an error would appear.
Ideally my goal is to have a dropdown menu that a user selects a title from, but I don't think you can add dropdowns to a full calendar.

Two clicks at back button are necessary to trigger popstate/statechange event

I have a page which contains an iframe. The iframe can take user's input (via button click or menu selection) and display content accordingly.
What I need is, when a user manipulates the iframe, the browser push each set of iframe parameters into history; and when the user click at back button, the iframe will reload its content using the saved parameters from the previous history entry. I have a piece of code doing the reloading as shown below.
The strange thing is, when I make multiple settings on the iframe (hence multiple state entries added to history), and then click at back, it'll work like this,
Say that I have state 4, 3, 2 in history and I'm now at state 5
the first click restore to state 4 (the "----state changed----" logging message is printed
the second click reloads the iframe with default content. The "----state changed----" is not printed; the reloading code is not called.
the third click restore to state 3
the fourth click is like the 2nd click
the 5th click restore to state 2
So after each click that successfully restore the state, it takes two clicks to trigger the popstate event (I tried statechanged event, too, with same result) and restore to another previous state.
Anyone know what's going on here? Thanks in advance.
History.Adapter.bind(window, "popstate",
function (event) {
console.log("----state changed------", History.getState());
console.log("----state data------",History.getState().data.state);
//code to do reload an iframe to its proper state
});
So I stumbled on this same issue. The situation we had was using history.pushState() to update the URL and then after that changing the src attribute of an <iframe>. By changing the src of the <iframe>, we are implicitly telling the browser to add to its history that the iframe had changed. Thus...
When we pressed back the first time, window.history's popstate is
triggered on the <iframe>'s src attribute and is reverted back to it's previous state.
Pressing back a second time triggers the popstate event for the state you originally pushed onto the stack
Our solution involved that when we decided to update the URL and push the state onto the stack, when we wanted to update the <iframe>, we used jQuery to replace the <iframe> list so...
$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'
By doing this, we removed the side effect of the browser history getting polluted with our update to the <iframe> tag.
I had the same problem.Instead of navigating the user to the previous page on the website, the back button navigated the user to the previous page inside the iframe. This code below will help you to solve your problem:
iframe.contentWindow.location.replace(href)

Use Page Items in a Button Link in Apex Express

i have a little problem. I'm using Oracle Applicarion Express and i'm trying to use some page items in a Link created for a button. I created the Button as region button, and selected in the region" Action when button clicked" "Redirect to URL". In this URL i want to use two pageitems. I tried already to use them mit ":PAGE_ITEM" or "&PAGE_ITEM." but non way works. Can someone help me please?
What does the resulting hyperlink look like? The chance is great that it looks like
f?p=<app_id>:10:<session id>::::P10_ITEM1,P10_ITEM2:,
This is because when using the substitution syntax like &PAGE_ITEM. will put the session state of the referenced item in the string. Since the button is rendered during the loading of the page it will use the session state of the item at that time.
When you then fill in a value for PAGE_ITEM, this will not change the session state of that item - and even if it did it would not matter since the button was already rendered.
If this is the case then you'd better have the button submit the page, and define an on submit before validations/computations branch to act on that button. In the branch you can then safely use the session state of the required items.

Change the NewPage for a TcxPageControl in the PageChanging event

We use a page control to step through a selection process from orders to products. The first tab shows a list of orders, the second tab shows a list of products for the selected order, and the 3rd tab contains a list of properties for the selected product.
If the user choose an order with only 1 product, we want to skip tab 2 and go straight to tab 3 to show the properties of the sole product.
I thought this could be done by setting the NewPage property of the PageChanging event, but it doesn't. What is a better way? To set the ActivePageIndex within the PageChanging event instead?
I would hide the tabs so the user cannot select them at all, and then use a pair of buttons to move back and forth between the pages as needed. When the user is on page 1 and is ready to move to the next page, the button handler can decide which page to show next.

Resources