I have 2 html pages. in page A, some script is active. When the user performs some action, some of these scripts work. When Click on a button occurred, it will go to the second page. I'm going to click on the back button in page B, to return to the first page occurs, while the recent changes that have occurred with the scripts be valid. But it's not, and when i come back to the first page, the page is loaded to its original state.
Related
The main achievement:
Load previous pages when going back from the detail product page to category/shop archive.
What I have done:
I have a WordPress/WooCommerce website where I have implemented lazy loading over shop/category pages through AJAX. Also, once the next page is loaded, the application updates the browser's URL with the pushState() method.
Case study:
Imagine you visit example.com/shop, and you scroll down. When you reach the footer, the next page is lazy loaded through AJAX and the browser's URL updates to example.com/shop/page/2. Once on page number two, you click on a product (example.com/product/lorem-ipsum), read the details, and see the pictures. Then you decide to go back by clicking the browser's back button. In that scenario, now you are back to the page example.com/shop/page/2, but the problem is that page one does not load on top of page two, so only the products of page two are showing. Once on page number two, can I automatically load the previous page/pages above the current page?
Real example:
If you visit the Nike website, you will see what I would like to achieve on my website. Please, load multiple pages scrolling down. Once done, click on a product and go back by clicking the browser's back button. Once the page is loaded again, you will appear in the exact place where you were before visiting the detail page, and you will see how the previous pages have been loaded on top of the product that has the focus (just the one you clicked).
What I have tried:
I have searched over the internet, and I haven't found anything. Maybe I do not know what to search. I have read that the window popstate event is fired when you click the back/forward button. I have tried to use this event to run some tests, but I have failed. I'm lost :(
Can you help me, please? Thanks in advance.
My web app has multiple html pages. On a given page (let's call it page A), a user can make edits to a form. My current method of checking for edits, when the user navigates to another page in my app, is to use the js script below.
$(window).on('beforeunload', function () {
if (changes == true) {
return "this won't show, as the browsers won't show a custom message for security reasons, but is required";
};
});
When I navigate to another page (let's call it page B) in my app the first time, this works just fine. However, if I return to page A and make another round of edits, even though the function above runs and my variable 'changes' is true, the browser does not display the warning message that you are navigating away. Apparently this is because page B is already cached. I am assuming this, because if I force a reload of page B and go back to page A and navigate away, the browser properly displays the warning message.
What is a better solution to ensure the user is always warned they are navigating away from a page with unsaved changes, when navigating to another page?
Update: This is working for Chrome, but not for Safari.
Okay I changed the plan. How would I create a bookmarklet that refreshes a link and clears cache until a page change is detected?
Edit: this might help (from JavaScript Bookmarklet; click button, reload page, then open page):
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Edit 2: this refreshes the page, so now I just need to clear cache on each refresh and stop when a page change is detected (overall function is like a page monitor but clears cache after each refresh).
---or----
javascript:
timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload(){
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>';
fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
Edit 3: found this for clearing cookies (which should be sufficient):
Edit 4: this checks for page changes:
Now how do I put this together?
I have added AJAX to a client's site to enable some simple animation of page transitions. So if we navigate to his homepage (with js enabled) at firedogcreative.com and then navigate to his edit page, and then to one of his work pages; we end up with a history something like this:
firedogcreative.com --> firedogcreative.com/#edit --> firedogcreative.com/#example1
Ajax takes care of loading the content of each of those pages in, it updates the hash in the URL bar in each case, and all works exactly as planned.
When a user clicks the back button, though, I'm not sure I understand what is happening. If they are at #example1 and hit the browser's back button, the URL bar updates to firedogcreative.com/#edit, but the page content doesn't change. If the user then reloads the page, though, it correctly reloads to #edit.
I tried adding this, which I thought would cause the pages not to cache and thus each back button call would reload the page, but it didn't seem to have an effect:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
};
If that worked, it would be a passable solution. The page would only ever ACTUALLY reload when the user uses the forward/back buttons, which would be fine.
So my question is, what is going on with the back button? Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
So my question is, what is going on with the back button?
It is going back to the previous URL.
Since changing the fragment identifier to track application state is a hack, nothing else happens.
Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
No. You are navigating back within the same document, so it isn't being unloaded.
You need to monitor the hashchange event and change the application state with your own JS.
Alternatively, switch to using pushState and watch the popstate event.
I'm using jQuery Mobile (no php or xml or anything else) for a web application running on cherrypy and i would like to find out how can i keep the page as it has been set by user even after refreshing.
As an example of the page, see this fiddle: http://jsfiddle.net/xaKXM/5/
in this example, user may input certain text in Response number and description. When the user click submit,user will see #configtable div. if the page is refreshed, user will not go back to the initial page (#labels div' )but to remain in the#configtable` (the one that user can't input anything but can only click activate button")
May be there is a button that would clear all those states and the page will go back to default when refresh?
Is this possible to be done?
if you refresh the DOM using window.open('index.html'); this should clear everything in the page