What's new?
Lots of stuff has been updated.
- Dirty and Clean events are fired off when a form has unsaved changes, and again when the form is cleaned again.
- It works with jQuery tabs now (they are tricky and don't work like normal links).
- Not limited to forms. Any container of inputs will work just fine.
Dirty/Clean Events
Forms can observe the "dirty" event for customized behavior. So you could set up the dirty form and then bind a function to the dirty event like so:
$(function(){
$("form")
.dirty_form()
.dirty(function(event, data){
var label = $(event.target).parents("li").find("label");
$("body").append("" + label.text() + "Changed from " + data.from + " to: " + data.to+ "
")
})
});
Dirty Forms + jQuery-UI tabs
You can use tabs with DirtyForm easily. Just be sure that you make the tabs into stopper links after they are set up as tabs so they can be recognized as such and set up properly. They need a lot of special casing.
$(function(){
$("#nav").tabs();
$("#nav a").dirty_stopper();
});
If you've already set up all the links for the app as stoppers don't worry this will still work as the other events will be unbound. No penalty for making any links into a stopper twice!
Not just for forms!
If you like throwing inputs in your table rows DirtyForm can handle it. Just tell it where you want it to look.
$(function(){
$('tr').dirty_form();
});
The plugin is available for download from github: DirtyForm
I had checked, and tested a lot of time.
ReplyDeleteIt work well and flexible on IE, FF, and Chrome
*But, in Chrome dirty in checkbox is wrong. and it's don't add class "changed" to checkbox so it can't show dialog to confirm cancel or processed*
terrific plug in
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteGreat simple plugin. How can I override the default dirty stopper dialog with my own?
ReplyDeleteAs I mentioned in my earlier comment, I really like this plugin because of its simplicity. But if you're considering it for your app be advised that it does not provide a way to customize the various parts of the dirty stopper popup alert dialog. Instead it has hard coded button names of "Cancel" and "Proceed" and a hard coded English message of "You have changed form data without saving...". Blugh! In this day and age of internationalized web sites this seems like a pretty basic requirement.
ReplyDeleteHey All, If you are using a date picker with this plugin you may notice that your date fields don't always show as changed. If you add an onClose event to your datepicker you can call the trigger.
ReplyDelete$(".date").datepicker({
changeYear: true,
changeMonth: true,
yearRange: '-100:+10',
minDate: new Date('1900/01/01'),
onClose: function (dateText, datePickerInstance) {
var oldValue = $(this).data('oldValue') || "";
if (dateText !== oldValue) {
$(this).trigger('blur.dirty_form');
}
}
});