Skip to content

Instantly share code, notes, and snippets.

@NightOwl888

NightOwl888/example.html

Created April 16, 2015 16:09
Show Gist options
  • Save NightOwl888/035788394a54c0400416 to your computer and use it in GitHub Desktop.
Save NightOwl888/035788394a54c0400416 to your computer and use it in GitHub Desktop.
Download ZIP
Demo showing the use of jquery.dirtyforms within an IFrame.
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment