I currently am building a website that fetchs data from MySQL with php and then displays it. On one of the pages I use a form to submit data and then I reload the page to display it. It does it's job fine and works exactly as I want the only problem is when a user presses the browser back button it goes through all previously submitted data instead of just going back to the page it came from. Is there a way to reload a page without the browser storing it or is there a way to make the browser go back to the previous page instead of history.
NOTE: I am aware of Ajax and how to use it to not reload the page at all but I wanted to see if there was a way to do it without redesigning my whole page with a seemingly small problem.
You can use history.replaceState in HTML5.
Another possibility appears to be
window.onpopstate = function(event) {
window.history.go(-1);
};
although I have not tried this myself.
See https://developer.mozilla.org/en-US/docs/Web/API/History_API and https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
Related
Posting without a target so that a web page reloads seems useful behaviour for some things - such as writing a login page. I have implemented a calendar in PHP which takes advantage of this. It reloads an object from the session (or creates a new one if not present), applying any changes that result from the post then saves the object back to the session. The problem is this. If I hit the back button I don't want to go back through every click of the calendar button but would rather jump back to the page before arriving at the calendar page. Not only that, if I do go back one calendar page after another I get an annoying "confirm form resubmission". I have implemented an incrementing value after the # for each post so that I might be able to use window.onhashchange. The problem is that window.onhashchange never fires so I am unable to intercept the back button and pop the history stack. Any ideas? Am I better off coding on the server side with javascript?
Well I solved one problem. My form subclass in PHP defaults to using POST as I understand this is more secure. This causes the annoying resubmission problem when using the back button. I now use GET in my calendar page which solves this issue. I am still bemused by JS debugging in Netbeans. I have never got script to stop on a breakpoint within a single document. I have previously had it working with an external javascript source but this no longer works. If I can output to console but there is no window in which to see the output. I am told window.alert no longer works for some events in Chrome. I am completely blind! To add to the irritation, it took me a while to realize was that the javascript file was cached and changes would not be reflected in behaviour. I have put a random number into the script tag which fixes this issue. As I am debugging using netbeans connector in Chrome I have no idea why this does not force the js file to refresh. All in all, this appears to be a pretty shambolic toolchain.
I am finding that when I use the back button on the browser or window.history.back(); the page being loaded sometimes refreshes and sometimes doesn't. I have not been able to reproduce this reliably but it is causing a problem in that I do not want the page being gone back to refresh is it displays different information every time it is refreshed.
I either need to ensure the back button and window.history.back(); do not cause a refresh, or I need to be able to detect on the page that it is being redisplayed as the result of a back button so I can somehow stop it being refreshed.
Is anyone able to explain why it sometimes refreshes and sometimes doesn't and what if anything I can do about it?
check out the html5 history api
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
I never implemented it by myself, because angular is managing the history by itself, but I think it should solve your problem
Is it possible to have a button on a webpage that will be named 'Back' and do window.history.back() if the user has navigated to the page from another page on your website and otherwise have some other title and be a direct link if the user navigated to your page from another website or went to the page directly.
Google plus on mobile seems to have this behaviour. When you click on a post in your stream then it has a 'back' button on the post page. However, if you go to the post page directly then it has a 'stream' button on the post page.
This seems tricky to implement because you don't have access to the urls in window.history.
Have you any chance of adding an ext lib like BBQ? It's a package used to manage the history behavior in your page.
I have done this before. You can do this with an anchor in the link. The anchor needs to have every get parameter of your application (i.e. application state) stored. Your application should be able to parse the anchor. To intercept the back button look here: stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript.
#benmmurphy I also had the same problem, then I used the following, which worked perfectly for me. You have to paste it on the page, from where you want to go back.
GO BACK
Hope this will help you.
A website contains a "random" link, which loads a url that returns a 307 redirecting to the url we want. It works fine: click it and you load a random page. The problem is that each time you click it, the browser assumes you're loading the same page: so if you're on the homepage, then you follow the random link 5 times, then you press back, you'll be taken all the way back to the homepage, with no way to find the random pages you were just looking at. I want to modify this behavior so that users can access previous random pages via the back and forward buttons.
I don't own the website, so I can't just change the redirect code.
Here's what I've tried, all of which has failed.
Predicting what would be redirected to. While somewhat possible, there would be no way to avoid failure in up to .1% of clicks, and it would react very poorly to unexpected events, like a page that's published a day late, let alone a sit structure change.
Loading the 307 page via ajax. The request stops at readystate == 2 and I can't access the location header.
Cancel the click event and instead set location.href = random_link.href. This has no effect - the new page still doesn't go into history.
Have the new page call history.pushState. This successfully adds the page to history, but I can't find a way to distinguish between new pages and ones being opened via the back button, so the history quickly becomes very corrupted.
Keeping my own history in localStorage. As above, I can't tell when the back button is being used.
I'm working on a solution that I'm pretty sure will work, involving loading the page in an iframe over the existing page and using a background process and messaging to work around the fact that content injections from chrome extensions can't access window.parent from within iframes. And using the history API to reflect the current iframe's URL in the address bar, and get the back and forwards buttons to apply to the current iframe where appropriate.
While I'm pretty sure the last solution can be made to work, it's a hideously complex and heavyweight approach to what seems like a simple problem. So I thought I'd ask you guys before I continue: any other ideas?
Have you tried storing the locations in localStorage, then hi-jacking the back button ?
I am sure you know how localStorage works, for hi-jacking the back button you can refer to this : Is there a way to catch the back button event in javascript?
T.
I developed a website using Javascript and HTML pages
Problem :
When i am clicking on refresh button on Internet Explore, it is going to home page instead of refreshing the current page of my web page. please do the need full
Regards
Santosh
This usually happens when you are using ajax to update parts of the website after loading.
Ex: Say clicking on add button loads a form using ajax.
When you do like this the URL in the browser remains same even after loading the form. Because of this hitting the refresh button will not take you to form again.
Solution:
Really Simple History (RSH) is lightweight JavaScript library for the management of bookmarking and browser history in Ajax/DHTML applications.
Use this library to update the browser URL after the ajax request. Now the refresh should work fine.
Hope this helps.