Sending and receiving data between two pages - javascript

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.

Related

Bokeh dashboard: any way to save user selections for page reloads?

I have a Bokeh dashboard where the user can select a bunch of inputs using CheckboxGroup and Select type of selectors, e.g.:
category_select = Select(value='produce', options=['produce', 'grocery','clothes','shoes'])
The dashboard is supposed to show near-real-time data though, so it reloads every 10-15 minutes, and all user selections (such as "shoes" above, for example) of course vanish when the page reloads, which is annoying for the user as they have to start over. Is there any way to persist the values of all their selections from one reload to the next?
I've tried using localStorage within the template/index.html file, but I only know how to use localStorgage when I can refer to a document's html elements by name or id, and I don't know how to get the names or id's of all the Bokeh elements. For example, for that 'category_select' selector above, I have no idea how to "wrap" it into some kind of < something id = "something" > category_select </something> type of syntax.
Help would be appreciated!
Instead of entirely reloading the page, I would try streaming the data through a periodic callback in the bokeh document that runs every 10-15 minutes as needed. This way bokeh automatically handles the task of remembering all of your user's selections. Streaming also has the advantage that it doesn't reload the entire data set but just appends the latest data.

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

General principles for page reload with counter and different data

The website I need to implement is for a simple user study: On a page there are some images shown, the user rearranges them to a certain order, hits the 'next' button and then the same page is shown again, just with different images, which the user rearranges again. The process is repeated until a certain page count is reached.
Which images to show, comes from a mysql database and the user arrangements for each page need to be stored in the database as well. I have decent code for the database communication and logic of the image arrangements in php. The ordering functionality of the images works nicely with javascript and jquery.
What is completely throwing me off now, is bringing it all together and the 'save and reload the page with different images' mechanism. Of course I found loads of information on the internet but I just can't bring it together (I am a noob with javascript and that stuff is seriously making my head hurt).
My question:
How do I implement a page, with a page counter, which is increased when I press a button; pressing the button also triggers sending the data to php for putting it in the database and also reloads/updates the page with a different image selection based on the page counter to re-start the process.
I would be most greatful for all: from explaining the general principles to specific code examples. I just need to make this thing work :). Thanks!
You need a < form method=POST > tag which wrapps all your images
For each image you need a < input type="hidden" > tag which stores the image id. This tag must be resorted with the images as well.
Resorting must change the position in the DOM
you need a submit button as well
On server side you can access the submitted data with $_POST variable in same sorting as in the DOM
You can count the number pages in $_SESSION variable or send the counter as GET variable with the page url
This is only a short overview, i hope this helps you.

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.

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