Develop Reference

Sending and receiving data between two pages

I'm working on a basic voting system where I have 2 HTML pages (both on the same domain).
On page 1 there are two buttons of which the person should choose one.
One page 2 I want to visualise the chosen option in a graph.
The goal is that if a button is clicked on page 1, the data on page 2 updates automatically without refreshing the whole page.
In order to do this, I tried saving the clicked option in a localStorage. I managed to get the data by writing a variable using localStorage.getItem(''). However, when I get the data, I have to manually refresh page 2 for the result to show. Is there a way to update the data on page 2? So if I press multiple buttons, multiple responses will show on page 2?
I also saw that there is a possibility of using WebSockets. Since I'm only familiar with HTML and JavaScript, I was wondering whether it's possible to solve my issue without setting up a server and run things locally. If that's not possible, what would be the best (and maybe easiest) way to solve my issue?

If you have page 2 successfully reading a variable that you get from local storage (which is being updated by actions taken on page 1), you can make a timer with setInterval to read from local storage every x milliseconds. Then the graph will update on its own.
See documentation for setInterval here.

Maybe the best and simple solution is setting specific url parameters for each button selection.
Then on the page 2 you simply show conditionally according the url parameter.

Keep SESSION value OR Cookies when hitting back button

I have two pages. The page 2 is accessible by the page 1.
The thing is I want to detect if someone came back to page 1 by the page 2 with a return button in order to display an other thing.
PAGE 1 -------------------------> PAGE
Normale Display Create SESSION or COOKIE
|
|
If SESSION or COOKIE <--------- Pressed back button
-> Secondary Display
So I tried to :
Create a cookie but it wasn't read
Create a Session variable but
it wasn't read neither
Empty the cache but I ended up with a warning message
Local Storage / Session Storage still react like a Cookie
Does anyone see a solution for me, either to force the read of one of those thing or force the page to acte as if it was a normale way of going to it when back button pressed?
Im open to any solution It's been two long days going around in circle.
EDIT :
Let change a bit my question by : How to detect if a page is reach using back button?
So I've seen this question but its an old one (2009) and an answer using Iframe which if I could avoid I'd like too.

The easiest way is to check for $_SERVER['HTTP_REFERER'] but if someone has multiple tabs opened while looking at your website it will not work properly.
I do not think that there is any "nice" solution to your problem.
Edit:
I guess that better question would be to ask what are you trying to achieve specifically. Why do you need to know if someone came to page 1 by the page 2 with a return button? Is there any other way how to solve your problem?

You can do that by changing the local storage I guess.
When page 2 is initialized, check if the precise storage of your local storage is empty or not. If not, display what you want in addition.
To do that you must put a controller which does that when he is called and don't forget to call it when the page 2 is loaded.
But you need to empty that local storage. Consequently you may want to reset it each time you go on another page except the seconde one.
It's kind of dirty, but it should work.
NB : It's pretty easy to do that with Angular JS. With pure Javascript it may be not that easy to do, but I'm pretty sure it is possible.
Hope that could help.

Ok so the solution was to send variables via history of url's.
Since HTML5 you can modify the history of navigation.
So basically the idea in my case was to send values in the url as in a get request :
yoursite.com/where_you_are?something=value
And for doing that you can modify url history with : history.replaceState({},'',newURL)
Eventually if you want to send object to your page you can use {} like this {myobject: value, ...}.
Hope this could help and have a look at the great documentation by mozilla linked above.
And eventually have a look there too

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.

Dynamically change a value on a asp.net page without actually refreshing it

I have a label, let's call it LblA. I have a SqlDataSource, let's call it sds. Now, I have selected out and managed to get specific values using the select function. I want to set LblA's text to the value selected out of sds. I need this to occur every 5 (or as many as I specify really) seconds. I orignally used a timer object, however, for any of you who have used the timer object before, it likes to refresh the page, this makes it very hard to navigate off of the page; not only that, it's sloppy. Does anybody know a way to easilly update LblA's text from sds without refreshing the actual page.
I've read around and came to the conclusion that I need to use ajax, err... jQuery. However, I really don't know anything about the two except that they are both Javascript libraries? I need a simple way, you might even have to explain it to me like I'm an idiot.
I'm using VB.net and ASP.net just so you know.
Thanks so much!

If you want it simple use UpdatePanel If you want more control and efficiency, use jQuery's Content

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.