Pull to refresh

Дополненный jQuery FormNavigate или «не дай юзеру потерять данные»

Reading time 3 min
Views 2.6K
Однажды на просторах Хабра встретил плагин FormNavigate (требующий у пользователя подтверждения на закрытие вкладки или переход по ссылке, когда данные в форме заполнены, а-ля gmail), а однажды потребовалось его даже применить.

Но тот вид в котором плагин был меня не устроил и я позволил себе немного его переписать.

Так, например, мне неудобно было выбирать те ссылки, на которых следует отлавливать подтверждения, а наоборот требовалось указывать ссылки на которые действие плагина не будет распространяться. Тут продвинутые разработчики начнут меня закидывать помидорами, что я не знаю правильную работу селекторов в jQuery. Но это не так, сами можете проверить как работает прошлая версия плагина, например, для: $('a:not([class~="ajax"])') (предложенный автором прошлого топика $('a:[class!="ajax"]') вообще вытворяла чудеса).

Что стыда скрывать, я позволил себе немного переписать плагин:
  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.     });
  7.  
  8.     var def = {
  9.       message: '',
  10.       aOutConfirm: 'a:not([target!=_blank])'
  11.     };
  12.     var settings = jQuery.extend(false, def, o);
  13.  
  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.     }
  22.  
  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.     });
  29.  
  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.     });
  33.  
  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.


Пример использования:
  1.   $(document).ready(function(){
  2.     $("#changeme").FormNavigate({
  3.       message: "Содержимое было изменено!\nВы уверены, что хотите покинуть страницу без сохранения?",
  4.       aOutConfirm: "a.ignore"
  5.     });
  6.   });
* This source code was highlighted with Source Code Highlighter.

где
message — текстовая информация в окошке подтверждения,
aOutConfirm — теги игнорируемые на подтверждение.

Исправлены некоторые проблемы, например, переопределения события onbeforeunload, неправильной работы с текстовым полем (textarea).

Скачать исправленную версию.
Посмотреть пример.

Надеюсь Вам это пригодится!
Tags:
Hubs:
+21
Comments 19
Comments Comments 19

Articles