NightOwl888/example.html

## example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
	.hide { display:none; }
	input.dirty { background-color: #cdedbd; }
	div { margin-top: 20px; }
</style>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" type="text/javascript"></script>

<!-- TODO: Update to correct location of dirtyforms -->
<script src="jquery.dirtyforms/jquery.dirtyforms.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function() {
	$('form').dirtyForms();
	// JQuery UI dialog
	$('form#registrationForm').append("<div class='hide'><div id='unsavedChanges'></div></div>");
	$.DirtyForms.dialog = {
		selector: '#unsavedChanges',
		fire: function(message, dlgTitle) {
			$('#unsavedChanges').dialog({title: dlgTitle, width: 450, modal: true});
			$('#unsavedChanges').html(message);
		},
		refire: function(content) {
			return false;
		},
		stash: function() {
			return false;
		},
		bind: function() {
			$('#unsavedChanges').dialog('option', 'buttons',
				[
					{
						text: "Leave This Page",
						click: function(e) {
							$.DirtyForms.choiceContinue = true;
							$(this).dialog('close');

						}
					},
					{
						text: "Stay Here",
						click: function(e) {
							$(this).dialog('close');
						}
					}
				]
			).bind('dialogclose', function(e) {
				// Execute the choice after the modal dialog closes
				$.DirtyForms.choiceCommit(e);
			});
		}
	}
});
</script>

<form id="registrationForm" method="post" action="example.html">
	<h2>User Registration</h2>
	<p>
		Change one or more of the fields below, then try to navigate away.
	</p>
	<label for="userName">User Name:</label><input id="userName" type="text" /><br/>
	<label for="password">Password:</label><input id="password" type="password" /><br/>
	<label for="passwordConfirm">Confirm Password:</label><input id="passwordConfirm" type="password" /><br/>
	<div>
		<input type="submit" value="Submit">
		<input type="reset" value="Reset">
	</div>
	<div>
		<a href="http://www.google.com/" id="hlShutter">click me to navigate away (and be stopped when dirty)</a><br/>
		<a href="http://www.google.com/" target="_blank">click me to navigate away in new window</a><br/>
		<a href="http://www.google.com/" class="ignoredirty">click me to navigate away (and won't be stopped when dirty)</a>
	</div>
</form>

</body>

## iframeExample.html
<html>
<head>
	<!-- Open this file (iframeExample.html) in your browser to see the demo -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

</head>
<body>
	<form method="post" action="iframeTest.html">
		<script type="text/javascript">
			$(document).ready(function() {
				$('body').append("<a href='http://www.microsoft.com/'>Navigate away (and be stopped when a form in the IFrame is dirty)</a>");
				$('form').append("<div><input type='submit' value='Submit (and be stopped when the IFrame is dirty)'></input></div>");
			});
		</script>

		<iframe id="frame1" height="400px" width="600px" src="example.html">Your browser does not support iframes. Too bad for you.</iframe>
	</form>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
	<style type="text/css">
	.hide { display:none; }
	input.dirty { background-color: #cdedbd; }
	div { margin-top: 20px; }
	</style>
	</head>
	<body>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" type="text/javascript"></script>

	<!-- TODO: Update to correct location of dirtyforms -->
	<script src="jquery.dirtyforms/jquery.dirtyforms.js" type="text/javascript"></script>


	<script type="text/javascript">
	$(document).ready(function() {
	$('form').dirtyForms();
	// JQuery UI dialog
	$('form#registrationForm').append("<div class='hide'><div id='unsavedChanges'></div></div>");
	$.DirtyForms.dialog = {
	selector: '#unsavedChanges',
	fire: function(message, dlgTitle) {
	$('#unsavedChanges').dialog({title: dlgTitle, width: 450, modal: true});
	$('#unsavedChanges').html(message);
	},
	refire: function(content) {
	return false;
	},
	stash: function() {
	return false;
	},
	bind: function() {
	$('#unsavedChanges').dialog('option', 'buttons',
	[
	{
	text: "Leave This Page",
	click: function(e) {
	$.DirtyForms.choiceContinue = true;
	$(this).dialog('close');

	}
	},
	{
	text: "Stay Here",
	click: function(e) {
	$(this).dialog('close');
	}
	}
	]
	).bind('dialogclose', function(e) {
	// Execute the choice after the modal dialog closes
	$.DirtyForms.choiceCommit(e);
	});
	}
	}
	});
	</script>

	<form id="registrationForm" method="post" action="example.html">
	<h2>User Registration</h2>
	<p>
	Change one or more of the fields below, then try to navigate away.
	</p>
	<label for="userName">User Name:</label><input id="userName" type="text" /><br/>
	<label for="password">Password:</label><input id="password" type="password" /><br/>
	<label for="passwordConfirm">Confirm Password:</label><input id="passwordConfirm" type="password" /><br/>
	<div>
	<input type="submit" value="Submit">
	<input type="reset" value="Reset">
	</div>
	<div>
	<a href="http://www.google.com/" id="hlShutter">click me to navigate away (and be stopped when dirty)</a><br/>
	<a href="http://www.google.com/" target="_blank">click me to navigate away in new window</a><br/>
	<a href="http://www.google.com/" class="ignoredirty">click me to navigate away (and won't be stopped when dirty)</a>
	</div>
	</form>

	</body>
	<html>
	<head>
	<!-- Open this file (iframeExample.html) in your browser to see the demo -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

	</head>
	<body>
	<form method="post" action="iframeTest.html">
	<script type="text/javascript">
	$(document).ready(function() {
	$('body').append("<a href='http://www.microsoft.com/'>Navigate away (and be stopped when a form in the IFrame is dirty)</a>");
	$('form').append("<div><input type='submit' value='Submit (and be stopped when the IFrame is dirty)'></input></div>");
	});
	</script>

	<iframe id="frame1" height="400px" width="600px" src="example.html">Your browser does not support iframes. Too bad for you.</iframe>
	</form>
	</body>
	</html>