Hi ,
If you want to give a alert mesage to user's while you naivagate away from one page to other page or any where. Then you need to use Dirty Form using Jquery.
If we use this plugin then we can prevent loss of any unsaved data from your web form.
This functinality invoke while
1. Click on menu items
2. Back button,forward button
3. And any other action which will navigate away from your current page.
It will detect the changes happend in your web form and give an prompt message for user like you have some unsaved data .you want to navigate from here or not ?
Using this task user may not loss any kind of data.
JQuery has a set of plug-ins which helps in watching the form for modifications and notifying the user when he navigates away from a webpage so that user will not lose unsaved information.
a) LiveQuery: This plug-in helps in handling the dynamic updates scenario on the webpage. So even if DOM is manipulated using DHTML techniques, the changes in the form values will be properly tracked.Live Query (formerly Behavior) utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
Example : $('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
b) DirtyForm:
This is a project for watching containers of inputs and notifying the user of unsaved changes.This plug-in actually does the task of tracking changes to form values.Dirty Forms is a flexible jQuery plugin to help prevent users from losing data when editing forms.
Dirty Forms will alert a user when they attempt to leave a page without submitting a form they have entered data into. It alerts them in a modal popup box, and also falls back to the browser’s default onBeforeUnload handler for events outside the scope of the document such as, but not limited to, page refreshes and browser navigation buttons.
Oh, and it’s pretty easy to use.
$('form').dirtyForms();
Sample webpage (How to use Dirty Flag)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<!-- Step1 -->
<!-- Reference to core JQuery library -->
<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<!-- Reference to dirty form JQuery plug-in -->
<script src="../../Scripts/jquery.dirtyform.js" type="text/javascript"></script>
<!-- Reference to live query JQuery plug-in -->
<script src="../../Scripts/jquery.livequery.js" type="text/javascript"></script>
<script type="text/javascript">
//Step2
//Flag variable which helps in identifying whether any modifications have been done
on the form
var isDirty = false;
//Step3
//Intercepts any navigation away from webpage. This event handler will display alert
message if there are unsaved changes on form
window.onbeforeunload = function() {
if (isDirty) {
return 'You have unsaved changes on this page.';
}
}
//JQuery ready function executes after the complete html DOM has been loaded in the
web-browser
$(document).ready(function() {
//Step4
//Configures Dirty form plugin to observe for changes on the form
$("#myForm").dirty_form().dirty(function(event, data) {
isDirty = true;
});
//Step5
//Cancel button action navigates to a different webpage
$("#btnCancel").click(function() {
window.location.href = "http://www.google.com"
});
//Step6
//Form submit handler. In this case we want to suppress the alert message.
//The trick is to turn off the isDirty flag and then continue with post operation.
$("#btnSubmit").click(function() {
isDirty = false;
return true;
});
});
</script>
</head>
<body>
<form id="myForm" action="" method="post">
Message:
<input type="text"/>
<input type="submit" value="Submit" id="btnSubmit" />
<input type="button" value="Cancel" id="btnCancel" />
<!-- Clicking this hyperlink will alert user of any unsaved data on the form -->
<a href="http://www.google.com">Goto Google</a>
</form>
</body>
</html>
Steps followed in above sample are:
Step1: Add references to core jquery library, livequery and dirty form jquery plug-ins
Step2: Use a global variable isDirty to track form changes
Step3: Use onbeforeunload event to trap navigations away from current webpage and notify user of unsaved changes.
Step4: Configure Dirty form plug-in to observe for changes on the form
Step5: Configure event handler for Cancel button
Step6: Configure event handler for Submit button to suppress alert message during submit operation
If you want to give a alert mesage to user's while you naivagate away from one page to other page or any where. Then you need to use Dirty Form using Jquery.
If we use this plugin then we can prevent loss of any unsaved data from your web form.
This functinality invoke while
1. Click on menu items
2. Back button,forward button
3. And any other action which will navigate away from your current page.
It will detect the changes happend in your web form and give an prompt message for user like you have some unsaved data .you want to navigate from here or not ?
Using this task user may not loss any kind of data.
JQuery has a set of plug-ins which helps in watching the form for modifications and notifying the user when he navigates away from a webpage so that user will not lose unsaved information.
a) LiveQuery: This plug-in helps in handling the dynamic updates scenario on the webpage. So even if DOM is manipulated using DHTML techniques, the changes in the form values will be properly tracked.Live Query (formerly Behavior) utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
Example : $('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
b) DirtyForm:
This is a project for watching containers of inputs and notifying the user of unsaved changes.This plug-in actually does the task of tracking changes to form values.Dirty Forms is a flexible jQuery plugin to help prevent users from losing data when editing forms.
Dirty Forms will alert a user when they attempt to leave a page without submitting a form they have entered data into. It alerts them in a modal popup box, and also falls back to the browser’s default onBeforeUnload handler for events outside the scope of the document such as, but not limited to, page refreshes and browser navigation buttons.
Oh, and it’s pretty easy to use.
$('form').dirtyForms();
Sample webpage (How to use Dirty Flag)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<!-- Step1 -->
<!-- Reference to core JQuery library -->
<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<!-- Reference to dirty form JQuery plug-in -->
<script src="../../Scripts/jquery.dirtyform.js" type="text/javascript"></script>
<!-- Reference to live query JQuery plug-in -->
<script src="../../Scripts/jquery.livequery.js" type="text/javascript"></script>
<script type="text/javascript">
//Step2
//Flag variable which helps in identifying whether any modifications have been done
on the form
var isDirty = false;
//Step3
//Intercepts any navigation away from webpage. This event handler will display alert
message if there are unsaved changes on form
window.onbeforeunload = function() {
if (isDirty) {
return 'You have unsaved changes on this page.';
}
}
//JQuery ready function executes after the complete html DOM has been loaded in the
web-browser
$(document).ready(function() {
//Step4
//Configures Dirty form plugin to observe for changes on the form
$("#myForm").dirty_form().dirty(function(event, data) {
isDirty = true;
});
//Step5
//Cancel button action navigates to a different webpage
$("#btnCancel").click(function() {
window.location.href = "http://www.google.com"
});
//Step6
//Form submit handler. In this case we want to suppress the alert message.
//The trick is to turn off the isDirty flag and then continue with post operation.
$("#btnSubmit").click(function() {
isDirty = false;
return true;
});
});
</script>
</head>
<body>
<form id="myForm" action="" method="post">
Message:
<input type="text"/>
<input type="submit" value="Submit" id="btnSubmit" />
<input type="button" value="Cancel" id="btnCancel" />
<!-- Clicking this hyperlink will alert user of any unsaved data on the form -->
<a href="http://www.google.com">Goto Google</a>
</form>
</body>
</html>
Steps followed in above sample are:
Step1: Add references to core jquery library, livequery and dirty form jquery plug-ins
Step2: Use a global variable isDirty to track form changes
Step3: Use onbeforeunload event to trap navigations away from current webpage and notify user of unsaved changes.
Step4: Configure Dirty form plug-in to observe for changes on the form
Step5: Configure event handler for Cancel button
Step6: Configure event handler for Submit button to suppress alert message during submit operation
No comments:
Post a Comment
Share your thoughts....