FSM (Finite state machine) modelling of a web page's states using jQuery

I am interested in how the kind of behaviour described below, may be implemented, using jQuery.

Technical overview:

Technically, the behaviour is best modelled by a state machine thus:

A page is loaded up and is in an initial state (state A). A page in state A places no restriction on the user, in that a user can do whatever he likes, on the page. Once the page is in state B (arrived at by clicking a specific button/link etc), the user needs to carry out a specific sries of steps (typically correctly filling out a form and submitting it), in order to bring the page back to it initial state. In other words, correctly submitting the form brings the page back to the initial state (State A)

Whilst in state B, any attempt by the user to move away from the page or click another link on the current page etc, will result in a messagebox (or JQuery messagebox) popping up and asking the user to confirm (Yes, Cancel) if they want to move away from the current task.

An example in practise:

A page is displayed, which presents a button for a user to click on, in order to fill in some required information. The user may chose to ignore the button, and carrying on with browing the site. However, once the user clicks the button and starts entering the information, if they (intentionally or intentionally) were to move away from the task (i.e. to do anything that would cause the current page to be refreshed/reloaded), then a message box should popup and ask the user to confirm if this is indeed what 开发者_开发技巧they want to do. A good example of such behaviour is actually found on this website, when you click the 'Ask Question' "button".

I would like to know how to implement such behaviour, using the functionality provided by jQuery.

Check out the window.onbeforeunload event here:

https://developer.mozilla.org/en/DOM/window.onbeforeunload

You can use it with jQuery like this:

var warning = false;
window.onbeforeunload = function(e) {
    return warning;
};

$('input,textarea,select').change(function() {
   warning = true;
});

This will set warning to true whenever the user changes any of the selected form fields. When the page is "unloaded", the window triggers the onbeforeunload event and displays a warning if the function returns true (the warning variable).

Pretty broad question...

1. on click for the button/link that display the form create a dialog
2. create a function that bring up a confirm dialog - attach this to the "close" event on the form dialog as well as the unload event on the window.

reference:

http://api.jquery.com/unload/

http://jqueryui.com/demos/dialog/

The question was asked some time ago, but you can now find some FSM implementation in javascript/jQuery you could use :

• https://github.com/jakesgordon/javascript-state-machine
• https://github.com/intersel/iFSM