Develop Reference

Update page as other instances of the same page changes in PHP

This is my question. I have a login for a user. Many users can log in with same credentials. When user/s log in, they see a set of radio buttons. Lets say User A, User B and User C log in at the same time. When User A selects some of the radio buttons, User B and User C should also see them selected in their pages. (and vice-versa) If User B changes a selected radio button again, User A and User C should get that updated value in their pages. Like this most recent selections should be visible in all pages. Please help me solve this.

I've done a similar setup awhile back, when user switches department view, all open pages of the application prompt him about the change and switch to the active department view.
I did it as follows.
Stored desired variables in user session. In your case, since you need this available across multiple users, session won't do - store it in a database or flat file. These variables are updated on radio onChange event in your case.
Make the following JS available to relevant pages. Note, I used onFocus since that was I needed, you may need to use setInterval()
window.onfocus = function(e) {
var_check();
};
function var_check(){
$.ajax({
url: 'home/check_vars_ajax',
type:'POST',
dataType: 'text',
data : {[YOUR DATA]}
}).done(function(data){
// ...
// handle selecting releavant radio buttons here
});
}
To summarize:
Write your radio selection to DB or flat file (via AJAX)
Setup a heartbeat call to check current status on the server (AJAX)
Update radio selection accordingly

Well another way to do it would be to go for WebRTC which basically allows you to screen share the users page and show the results on the other users or vice versa. It has very neat API and there are lot of samples that you can check out. Tutorials are available and their homepage itself is a good starting point
But with regard to your particular problem, I cannot give you a clear answers as the question itself is little broad(in my opinion). So check it out and hope it helps.

You can do it with a simple database query. How it works is, when someone logs into a page, it grabs a variable from a database row. At a set time, the page queries the database. if the value has changed in the database, update that row by one. the other pages will query at your set interval, and update the page with AJAX. It is a nifty way to update all pages at once. Here is a tutorial in this.
AJAX auto refresh
You can see a modified example on my request box on this page
AutoRoxx Radio
It is easily modified. Basics are there.

What is the best way to store and retrieve datas after clicking the previous Button Browser

I want to know what is the best way to store and retrieve datas only after clicking the back button Browser ?
In my case, you have a list of items (different for each categories I have on my website) that appends in angularJS with the ng-repeat directive, and you can filter these items by clicking on the checkbox inputs. Obviously, each checkbox has a specific value corresponding to a filter.
When the user click on an item, it redirects you to an article (such as a blog post).
May be the user doesn't like this blog post so he clicks on the back button of his browser to go back to the item list.
But for now, I don't store checkbox tags that have been checked before and the items filtered.
I try with localStorage and sessionStorage in JS but datas are too persistants with this method.
I could make a trick like retrieving the datas if the REFERER matches with a specific url pattern, but it seems to be too tricky..
So any of you has a better idea ?
Thanks in advance.

You can use the state object for this purpose. This one is accessible via history.state and will change when a user navigates to somewhere. It will also be restored when using back button etc. It is can be seen as a storage object that is linked directly to the url.

Javascript: Making divs hold state of display='block' when user clicks BACK button in browser

I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.

As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.

Cookies or localStorage if you aim for only modern browsers:
localStorage

Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.

All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.

state persistence on ui

Here I am posting my problem statement.
User select option from drop down. Selected value appears on page. But, when user refresh the page then that selected value disappears from page.
I need that that value should be what I selected before refresh the page.
Is this possible using js/jquery.
Please guide me how I can achieve this!
Regards

You have several solutions to do this.
Every time the user selects an option, send a http request to the server with the selected option. When the user refreshes the page, the jsp will use the collected info to pre-select the option. A common $.get in jQuery will do the trick client-side.
Set up a cookie with the selected option. When the page is refreshed, get the cookie value and use it to pre-select the option. You don't need jQuery to do this, but it may help.
If the browser supports it, use localStorage instead of cookies. It's a client-side only solution, so the info won't be sent to the server.
Set up the hash of the URL to store the option:
location.replace("#option=" + val);
You can retrieve the value when the page is refreshed using location.hash.

You have a couple of options here:
You can set a cookie using jQuery which saves the previous state. A nice tutorial can be found here: http://www.electrictoolbox.com/jquery-cookies/
you could also encode the options in the url with a query string. Some info about that can be found on wikipedia: http://en.wikipedia.org/wiki/Query_string
Which of the two you want is up to you, cookies are the way to go if you want the settings to persist if the user leaves the page and visits another time, the query string is more useful to prevent refreshing from clearing your settings.

Using the cookie plugin (http://plugins.jquery.com/project/Cookie):
$("#MyList").change(function() {
//Set a cookie with selected value on change.
$.cookie("SelectedItem", $(this).val());
});
$(document).load(function() {
//On load, set the selected item from the cookie.
$("#MyList").val($.cookie("example"));
});

Retain HTML form input enabled state on back button

I have a form that sets input fields as enabled / disabled based on some radio buttons and a checkbox. If the user navigates forward then hits the back button, the field values are retained but the enabled state reverts to the default. Is there a way to handle this via javascript?

You could try invoking your javascript function that enables/disables DOM elements based on radio button selections in the DOM ready event (window.onload). This event will be executed when loading the page from cache and normally it should wire up the enabled/disabled state of those elements.

The best answer here is: "It depends".
I'll explain.
This depends on how wide a browser audience you want to support. In most modern browsers, you could try and capture the DOM elements and values of the buttons in a Javascript / JSON block then push that into a location like window.localStorage or even in a cookie ( a cookie would be your best bet if you want this to work on older browsers ).
Once the user then traverses back, you could check for the value or values and re-establish button state then on load of the page.
However, if you are using a Javascript framework such as jquery, I would recommend taking a look at this:
http://archive.plugins.jquery.com/project/DOMCached
This will allow you to perform the same stunt as I just described, where you could capture the button parameters into a JSON / Javascript data object, store via DOMCached then access later when the user returns to the page itself.