Go back to previous page regardless of changes in query string - javascript

I have a page with a searchable table. I have written a "Back" button to go back to the previous page:
Back
For example, the URL of my homepage is:
https://xxxxxx.com
I enter the page with a searchable table from my homepage (Or any other page):
https://xxxxxx.com/data
When I preform a search, the URL becomes:
https://xxxxxx.com/data?search=*sth*
When I hit the "Back" button, the URL becomes:
https://xxxxxx.com/data
What I actually want is:
https://xxxxxx.com/
(Or the page where the user comes in before /data)
How can I rewrite my javascript on the search button, so that the Back button can get to the actual page?

Instead of history.back(), which goes back only by one, you could do window.location.replace(window.location.host), which loads the root page.
To get more info on window.location: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
Edit:
If you want to ignore URL parameters, you need to change how you go to another page.
Instead of window.history.pushState(...), you should use window.history.replaceState(...), when the navigation should be ignored on a back click.
Here more to read on that topic: What is the trade off between history push and replace?

Related

Back to previous page instead of previous url in next js

I faced a problem where I have some filters on a page. When you filter, the page URL will change and the query string will add to the end of the URL.So when you click on the back button, the page will stay on the current page and will back to the previous query string. What I want is to get back to the previous page which is come from that to the current page.
For example, I am on /home page, then I go to /browse page, then I filter some items and my URL will /browse?subject=2 and I filter again and the URL will be changed to /browse?subject=2&vendor=2. Now I want to the previous page (I mean /home), when I click on the back button I will go to /browse?subject=2. I hope I have conveyed what I mean.
What you need to do is in your /browse page when you are filtering use router.replace instead of router.push in this way, your filter result won't be added into the browser history and when you try to use router.back you would go to the previous page.

How to remove a value from localStorage after reboot?

1) Enter text in the search
2) it is saved in localStorage
3) press "search", and the page is reloaded,
4) the text entered there in the search bar.
It is working correctly.
But if I start to click on other pages of the website, the search bar is still populated with a value from localStorage.
How can it be removed at the next reboot?
What should I use (not localStorage)?
In your comment you've clarified you want to do:
enter data
press "Enter"
reload page
data entered in the search bar
the next reloading of the data should be deleted
It sounds to me, then, like you don't want to use localStorage or sessionStorage at all. Instead, when sending the data to the server at #2 above (I'm assuming that's what pressing Enter does), return the search bar data when the page reloads at #3 above; use that to populate the search bar. Subsequent refreshes of the page won't have that data (because you won't have sent it, so you won't have echoed it back).
A less reliable solution would be to save the data in web storage (either localStorage or sessionStorage) at #2 above, then on page load see if the data is there, use it if so, and delete it. Then it won't be there on subsequent page loads. I say that's less reliable because if for some reason your page doesn't reload at #3, or while the data is being sent the user opens another page on your site with this search bar thing, they could see search data. That's why including it in the response to the search makes sense.

how to go back to previous page on click and reload with previously posted form data with php or js

I have a flow like this
Order Form page (index.php)
Confirmation page (where email is entered) (place-order.php)
Success page (register.php)
All pages have the order form with display:none and can be called on click to display.
In the success page, if the email is empty, it says 'go back and retry'.
Now when I use history.go(-1) or window.location.replace("place-order.php"); or
window.history.back(); it goes to the previous page. But the browser asks the user to reload page as the webpage has expired.
window.location=url will not work as it will go the url and all previously posted form data to that page will be lost
I want the browser to go back to the page and automatically refresh the page without the browser asking you to do it retaining the form values as when passed on from order form
What would be the best approach ?
I realized that the answer is very simple using the _SESSION Variable !
I stored the POST variable to SESSION['place-order'] variable and used
window.location:place-order.php
in the register.php page to redirect and added the following code to the place-order.php page
if(isset($_POST['clothessub']) || $_SESSION['placeorder']){
if(empty($_POST)){$_POST=$_SESSION['placeorder'];}
//Do my stuff
}

Back button when pagination is used in table?

In my angular js application i am using pagination in user list page,through which i am getting ten users at a time from server,and clicking on second page another ten users and so on.Details of a users are listed in a table.Now when click on some user,profile of a selected user is open in another page. Now when i come back from user profile to user list my table is again start from current page one.
That's the issue i want when i come back from user profile , user list must be open from the page where i was.
There are some way that you can fix it.
I recommend you two way.
First:
Change hash in your url when your table page changed and detect hash when you come back to your page.
like this url
http://youraddress.com/subdirs#page=2
You can find how change and detect hash in this link: https://docs.angularjs.org/guide/$location
Second:
Open user page in ajax div with $http in angularJS.
https://docs.angularjs.org/api/ng/service/$http

How to maintain states of selection on back button

I am using HTML and JavaScript to write Android APP, but I have a problem that when go back from current page to the previous page, the page is reloaded and the selection and setting when I made in the first goes to default.
For example: On the first page user can select country and city and then navigate to second page.
If user clicks on back button (which calls window.history.back(); or href="javascript:history.back(-1);")
, then all the selection he made are lost and default selections are shown.
It works fine in native browser of Android.
How to maintain state of selection?
Thanks in advance!
You need to make dummy history to disable history back button.
var originalHash = document.hash || "#dummyMain"
location.assign("#dummyBack")
location.assign(originalHash)
window.addEventListener("popstate",function(){
if(location.hash == "#dummyBack"){
window.history.pushState(null,null,originalHash)
}else{
originalHash = location.hash
}
});
The code above create dummy page history and checks if page transitions are occurred via history back button or not and if so,force page move to current page again to stop history back action.
Since You didn't put any code in the question,It's hardly possible to say it will work or not but I guess once you load this code,it should disable all page back action.
If you are using PC/Mac to use this site,please try to open developper tools/firebug javascript console and copy/paste the code and press history back button to see how it works.
I find a good way to maintain the data of previous page, which use localStorage store the data as key value before leaving this page and again when come back to this page you can get your data again from localStorage` and display it.
Because the data which is loaded by AJAX will be last on history back.
Hope this help someone may has this problem.

Categories

Resources