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.
Related
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?
I have a search page, where once I input some parameters, I get search results back. Some of the values have links in the results, when I click on them it will route me to another page. I have a back button on the new page where if I click it, I want it to go back to the previous results page with the search results still present.
Is there a way to do so in Angular cli?
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.
is there any solution to go back to previous page automatically without reloading the previous page?
I have index.php page full of jquery dropdown list, and after last dropdown list, there is a form to edit data. After editing data and successfully added to database I want to go back to index.php without losing selected dropdown list before.
I try meta http-equiv refresh but no luck. I also try javascript function to call history.go(-1) after specific time but it seems no work also.
It can be done if I create a href link to history.go(-1), but I want it to be automatically.
Any solution for this?
history.go(-1) automatically?
Like this?
I'm feeling lucky
Feel free to connect it to anything, doesn't need to be a button.
I'm looking for a way to update the url in the status bar..
I have a gallery, and when you click your way through the gallery I want the image ID to show up in the URL, so that the user can link directly to the image..
I've read about using hash and so. but as far as I've tried it, that "ruins" the history.
If I click the back-button in my browser the previous image would be shown.
Is it possible to add or update a URL parameter, without ruining the history?
Thanks in advance
Use location.replace to replace the current location:
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
Do it simply this way, when switching to images, add a hash to the url, for example:
location+='#image-'+image_id
your location will become
http://example.org/images/#image-3
instead of the initial
http://example.org/images/
and onload, check if location.hash is not empty, and matches with ^image-(\d+)$ (regular expression pattern), if it matches, do the usual thing you'd have done if a user clicks on image with id (\d+).
To preserve history, use reallysimplehistory.