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.

Interim message when downloading a file

On my website I have an option to display some data and also to download it in csv format. Some of the data is quite large (20,000 - 900,000 rows in SQL). When I display it on the site I use paging so that it quickly displays only x amount of rows at a time, however, the download link of course should and is downloading the entire report which can take several seconds to a couple of minutes depending on file size. I'm wondering if there is a way to create an interim pop-up or message in-line that says something like "Gathering Information..." where I could additionally put an animated gif so the user knows something is happening. Creating this shouldn't be an issue but I'm not sure if there is a way to trigger that to disappear once the download pop-up appears. The solutions I've seen on this site all suggest using a timer, but thats not an option in this case as the times will vary a lot.
I'm using classic ASP so would like to use either that or JavaScipt. I could additionally use flash if makes a difference.

I would probably wire up the "Gathering info..." message to be hidden upon receipt of a Comet style message from the server that could be sent out as soon as the file is ready to download on its end.

The gist of it is to use a cookie that you set using pure javascript or jquery cookies for ease of use. Then you send the cookie's name to your server, which sends an update for said cookie with the file once delivered.
Meanwhile you have some JS code that checks periodically for the cookie to see if its updated, and can then update the layout accordingly.

I ended up doing this a different way. On my site I have page we'll call "default.asp" on that page is a link to another asp wel'll call "download.asp". download.asp is where the code is to do the SQL query and create the report, which means this is where the wait comes in. After the report is prepared the popup to save, open, etc is displayed. What I ended up doing is creating a div that by default is hidden. When the download button is clicked the div is unhidden, then just before the popup is displayed I once again hide the div. Hopefully this can be of help to someone else as well.

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.

Using Javascript with Asp.net for ListBox

I want to use ClientSide Javascript for listbox, it should take values from database table when the page is loaded first time OR load the specific table in javascript,
Right Now, all the values are coming from database, if I select "StandardM1(CA)"
it brings all the values from "food_menu" table.
I want to do the the same thing with client-side javascript in order to save time and server requests, so that the application runs faster.
Can some one please guide me?

Faheem use array in it and try to do the coding right on the save button. its the save button that is creating problems

How can I store a list of usernames on client side?

I have a load of chat boxes which come up on click of a username within a list. The problem is I need to know which are currently chosen to hide/show if more are clicked than there is screen space (think of facebook - you keep clicking friends for private message and when no more fit along the bottom, the next one takes the last boxes spot. Clearly you hide this last one, but want it to come back if you close this current choice)
So, I need to cache a list or have a ridiculous number of input boxes in preparation. I have been looking at possibilities and is it possible to implement this with JSON cache? Is there a better option?
If JSON is the best option, please can somebody show me simply:
-> store array of usernames in jquery to JSON cache
-> retrieve JSON cache into jquery array
My JSON knowledge = 0.0001% and this is the only thing I want to use it for for a long time so my jsfiddle attempts failed. If you know any good "beginner / fast skim over" tutorials please link them!
Many thanks as always

Maybe you should look into the HTML5 feature localStorage
localStorage
localStorage How to use it
With that you can save the current username list of your users in their browser and access it easily with javascript.
You can save the data just for the browser session sessionStorage or for longer localStorage, so if the user comes back the next day, his settings will still be set.