Tell when a user is going back in browser history - javascript

I have a page A that displays some text from my database. The text is editable and gets autosaved using AJAX. If the user would go away from that page, and then go back to page A using browsers history functionality, the page would not have the latest data (since we went back in history). And the user would edit the old data, which would overwrite the latest data on the server when it gets autosaved.
I assume this is purely a front-end issue, where my server can do nothing about this. What solutions could be aplied? If it was possible do detect with javascript that the user went back in history, then I could simply display a text saying that the user has to refresh the page. But is that even possible? Or are there any better solutions?

There are lots of options and strategies for a situation like this.
The first thing you can do is to try to disable caching on the page. You can use meta tags to do this.
You can also keep track of when the user presses the back button using libraries such as this one. You can respond either on the server or on the client, although you want to be careful because a disabled back button can annoy users.
Should you ever happen to consider using a javascript framework such as AngularJS you can probably keep track of the back button using the framework.
Finally you can solve issues like this with careful page design. If the data on a page can change you might load the current data via ajax before the user has a chance to edit it. By doing this - your "load" code will run even if the user does use the back button. Take a look at this stack for more information on that!
Hope these suggestions help a bit!

If you are using Jquery then use/
$(document).on('pageshow', '#Content' ,function()
in place of
$(document).ready(function()
It will solve your problem, the javascript file that is back end will be loaded when that particular page loads

Related

created buttons with user input, how to store them for the next time

I created a html page, where the user can create a button via javascript/jquery, which will appear on the html page after adding it.
So my question is, how it is possible that the button will be there also if I am closing an opening the page again?
I hope my question is clear, I can also post my code if it is necessary! Thanks!
You will need to use some server side code to do this.
You cannot rely on cookies since they will be gone sooner or later.
PHP with MySQL to store the information you need seems like the easiest approach for some simple user database interaction.
There's not much to work with here hope you find this response helpful and guiding you the right direction.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Items in DOM not clearing, how to clear cache

I have a site where items are loaded onto a page in the DOM as I'm using a masonry type effect.
Now, users can delete these items at any time, many at once if they choose to.
The problem is, after deleting, I refresh the page showing the items by reloading it, and the items are still there. Even if I leave the page and return the items are still there. But they have definitely beeen removed from the db table. The only way to clear them from the page is CTRL+R, a complete refresh
How can I clear the DOM cache, or force a refresh? Or is there a better way to do this?
I'm using PHP as main backend lanuguage. I'm also using Jquery.
Not sure what to tag this but think JS and Jquery issue so will start with that.
It's neither a JavaScript nor jQuery issue. It's a caching issue. You need to configure your web server to set the correct cache control headers (Expires and similar) so the browser knows to re-fetch the page. (You can also set them in the PHP response if you need to vary them from page to page by using the header function.)
I won't single out a specific link, but if you search for "cache control" you'll find a million tutorials. :-)
Added timestamp to ajax call so it doesn't cache in the first place, simple really when you think about it backwards!
Many thanks for the other answer/comment

Canonical Java EE way of checking for unsaved session data?

My app has a use case where there is a page where the user can edit data and press save or interrupt editing and make a search or click links. The framework is kind of odd and uses javascript to submit a form for every link that is clicked so we ended up with a mishmash of javascript and java hacks the facilitate the dialogs and checks for unsaved data which became messy and I had to ask about it:
How to exclude components from javascript onkeydown
https://stackoverflow.com/questions/12525020/why-does-this-code-create-a-loop
I either got dialogs that never ended, pressing "yes" to "You have unsaved data. Do you want to comtinue?" made a loop to another same dialog and when I tried to fix it nothing works.
Now the program works on the screen but the solution is messy and if there is another bug or we notice that my solution affect other component there will be trouble.
So I'm asking if you know a plain Java way to check for unsaved session data? What happens is a form is presented to the user and clicking a link when data has been edited should present a dialog thatwarns that data is unsaved. I think doing it without javascript is a better solution, can you comment and/or help me here?
No.
The user enters data in their browser; there is no way for the server to know this unless you submit it.

How do I keep form data when Back button is clicked

I am developing a rails app.
(I don't think this is a rails-specific problem)
There's a reservation process which is consisted of 3 steps.
When a user is on step 2 page, if the user clicks 'Previous' button, the form data in step 1 should be the same as before.
I attached "history.go(-1);" to the 'Previous' button.
It works on my firefox browser.
But it doesn't work on some IE browsers.
My IE works though.
How can I force it to preserve the form data when the page is back?
Thanks.
Sam
Can't rely on the client (javascript) for this kind of operation.
You save the data somewhere at step 1, so just restore it.
look into having a hidden iframe on the page to store the data. I am not sure of the specifics of implementing this, but this is the technique people use to store the state of the page when the hash changes in the URL. Check if some libraries like dojo and jquery help support this situation.
You could save page 2's data to the database, or a server-memory cache, or a cookie or three, and restore it when the page is loaded.
ASP.NET does this automatically via ViewState (note: article is ancient, but still quite accurate). Perhaps you can adapt a similiar approach to Rails.

Categories

Resources