Added jQuery FormNavigate or “don't let the user lose data”

Once on the open spaces, Habra met the FormNavigate plugin (requiring the user to confirm the closing of the tab or follow the link when the form is filled in, a la gmail), and once it was required to even apply it.

But the kind in which the plugin did not suit me and I allowed myself to rewrite it a bit.

So, for example, it was inconvenient for me to choose those links on which confirmations should be caught, but, on the contrary, it was required to indicate references to which the action of the plugin will not apply. Here advanced developers will start throwing me with tomatoes, that I don’t know the correct work of selectors in jQuery. But this is not the case, you can check how the previous version of the plugin works, for example, for: $('a:not([class~="ajax"])') (suggested by the author of the last topic $('a:[class!="ajax"]') generally do miracles).

What a shame to hide, I allowed myself to rewrite the plugin a bit:

1. jQuery.fn.extend ({
2. FormNavigate: function (o) {
3. var formdata_original = true ;
4. jQuery (window) .bind ( 'beforeunload' , function () {
5. if (! formdata_original) return settings.message;
6. });
8. var def = {
9. message: '' ,
10. aOutConfirm: 'a: not ([target! = _ blank])'
11. };
12. var settings = jQuery.extend ( false , def, o);
14. if (o.aOutConfirm && o.aOutConfirm! = def.aOutConfirm) {
15. jQuery ( 'a' ) .addClass ( 'aOutConfirmPlugin' );
16. jQuery (settings.aOutConfirm) .removeClass ( "aOutConfirmPlugin" );
17. jQuery (settings.aOutConfirm) .click ( function () {
18. formdata_original = true ;
19. return true ;
20. });
21. }
23. jQuery ( "a.aOutConfirmPlugin" ) .click ( function () {
24. if (formdata_original == false )
25. if (confirm (settings.message))
26. formdata_original = true ;
27. Return formdata_original;
28. });
30. jQuery ( this ) .find ( "input [type = text], textarea, input [type = 'password']], input [type = 'radio'], input [type = 'checkbox'], input [type = 'file '] " ) .live ( ' change keypress' , function ( event ) {
31. formdata_original = false ;
32. });
34. jQuery ( this ) .find ( ": submit, input [type = 'image']" ) .click ( function () {
35. formdata_original = true ;
36. });
37. }
38. });

* This source code was highlighted with Source Code Highlighter .

')
Example of use:

1. $ ( document ) .ready ( function () {
2. $ ( "#changeme" ) .FormNavigate ({
3. message: "Content has been changed! \ nAre you sure you want to leave the page without saving?" ,
4. aOutConfirm: "a.ignore"
5. });
6. });

* This source code was highlighted with Source Code Highlighter .

Where
message - text information in the confirmation window,
aOutConfirm - tags ignored for confirmation.

Fixed some problems, for example, overriding the onbeforeunload event, incorrect work with the text field (textarea).

Download the corrected version .
See an example .

I hope you find this useful!