Browser back button misbehaving. Can I cure it with JS

Hello,
I’ve been having problems with the inconstency of the browser Back button. This is the scenario:
1.From index, I click a link opening subpage1.
2.I activate the Back button, no problem. I’m returned to index.
3.I click Subpage1 again. I select an option from Subpage1, which reinvokes subpage1 with options, i.e. subpage1?user=553, or subpage1?user=553&option=2.
4.Clicking the back button refreshes the newly invoked subpage1, but doesn’t go back. Clicking Back again, takes me to index. The upshot is that a user selects subpage1, then selects subpage1 with options. They’ve selected the wrong options, so need to go back, but they can’t.
I’ve attempted to solve this using JavaScript, but still not working. Have I overcomplicated the situation, or just got something wrong in my JS.
JS code is here: https://codepen.io/Gridman/pen/NWQVJrJ
I can’t provide the whole project as it’s very large, and would involve giving away login details etc. Any clarification required, please let me know.
Thanks.

3 Likes

The JS looks a little too complicated for me.

Can you do the below steps for now to check something.

Can you open the developer in your browser. Like I did in the image below
and follow the steps and let us know of the result (with image if possible).

Now I click in let say Ruby link:

In the console I type: “history.back()” and hit Enter

It brings me back to the previous page.

1 Like

OIK, not sure how to upload images, but I’ve done as you suggested, and I get the same symptoms, i.e. the first time I tuype history.back(), nothing happens, but the second time I type it, I’m taken back to the index page. I think the JS is complicateed because of this. The back button is working, but for some reason, when you load a page with parameters, it does something to the previous entry in history.

Could you confirm that in step 4, where you’re backing up to the first instance of subpage1, that the url in the browser goes back to something like:
http://example.com/subpage1.php, without any query parameters?

Ie, it actually does go back, there are no ?user=553 or option parameters, but the page doesn’t adjust as expected?

And could you confirm the you’re not just saving the ‘user’ and ‘option’ values in some session variable and on the second return to subpage1 pulling them out of those session variables rather than realizing they’re not in a $_GET parameter and shouldn’t be used?

NB I would and have done this kind of thing just in php without fiddling with the history stack in JS, which is why I ask the above. Perhaps I’m missing the purpose and need for the JS.

Very strange. I am doing the same as you passing parameters and don’t get the same issue.

@tracknut is right that JS is basically doing the same as the browser button.

I’m guessing the site is not public, otherwise we can have look at it.

You can expose your website temporarily by using this:

And send us the link, so we can have a look.

What a great question. Using a screen reader here, so didn’t look at the address bar, but in fact, the page remains the same, but the address changes, i.e. no options to be placed in $_GET. I don’t store them in $_SESSION either. In summary, hitting the back button initially modifies the address bar without changing the content, and pressing back again takes me back to the index page.

Here is a temporary link:
www.ethelwivic.uk?test=WVV_2024
Click on Unallocated requests, and select display for one of them, and you’ll see what I mean.

This is what I am getting:

So the question becomes how does subpage1 know to display the user and option values from the prior request, when they aren’t passed as parameters? Seems to me a little debugging, like printing out those variables before you display the table or do a database query is in order.

Can you disable the JS related to this history management, in case it’s just some JS code that’s changing the address bar, but never really doing an http request to the page?

@zensei I’m using a screen reader, so can’t interpret your image. With or without the JS, the behaviour is the same, i.e. hitting the back button once strips the parameters, and hitting it again places the user back in the index.

Parameters are being passed correctly. When displaying a request, the address bar correctly says: unalrequests.php?requid=555. On pages where parameters aren’t passed, it all works fine.

Is showing a login page so I am stuck there

@Zensei, my bad. Comes of rushing things. Should have been:
www.ethelwivic.uk?Test=WVV_2024

Looks like it is server side issue.

If I call the request with parameters and then I call the same request without parameters it returns the same page from the server.

Make sure in that your PHP server code, if there is not parameter to return a different page.

I am not putting images because you cannot see them.

So what you’re implying is that the back button is working, but the page isn’t being refreshed.
I’ll try putting an unset($_GET) to see whether that makes a difference.
Many thanks for all your help.

Yes. That is what I am saying.

I cannot help you with PHP, but if you get stuck on that part I suggest you put that area of the code here. I know they are specialists in PHP in this forum that can help.

Good luck

You were right. I’d forgotten to unset a session variable. I’ll experiment without the JS code…
Many thanks for your help in finding a solution.

Which someone could have helped find days ago if -

This does not mean posting all the code, nor does it mean posting any (database?) login credentials (which should be tucked away in a configuration .php file that gets required when needed.)

Session variables should not be used to determine what content (in bold) gets displayed on a page, as this violates one of the main purposes of posting content on the internet, of having unique URLs that correspond to that content.