beforeunload, как отменить реакцию на нажатие кнопки submit?

277

01 февраля 2018, 17:19

Подскажите как решить данный вопрос или сделать аналог. На странице заносятся данные и происходит резервирование алиасов с записью их в БД. Требуется, если человек не сохранил, а просто решил выйти, закрыть, обновить или перейти на другую страницу, то должен выполниться скрипт (ajax), который очищает все в БД и других местах (т.е. как бы отменяет действия пользователя). Очистка происходит после выхода окна с подтверждением ухода или обновления страницы. При нажатии на сохранить - все должно без лишних вопросов сохраняться. Я использовал следующий код:

window.addEventListener("beforeunload", function (e) { 
    var confirmationMessage = "1"; 
 
    (e || window.event).returnValue = confirmationMessage; //Gecko + IE 
    return confirmationMessage;                            //Webkit, Safari, Chrome 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Все отрабатывает, как надо, за одним ОЧЕНЬ серьезным исключением! При нажатии на кнопку "Сохранить", так же срабатывает данный код и в итоге все удаляется. Код кнопки (вдруг это важно):

<div class="btn-group"> 
  <button type="button" id="jsubmitbtn" class="btn btn-primary itemsave" onclick="Joomla.submitbutton('article.save')"> 
    <span class="icon-ok"></span>Сохранить				</button> 
</div>

Видимо из за того, что после сохранения происходит редирект (а с ним ничего не поделать, он нужен), то и beforeunload срабатывает. Может возможно, как-то отфильтровать данный момент?

Дополнение

насколько я понял изначально, .unload() вызывается только при положительном "ответе" в диалоговом окне beforeunload. в этом видимо моя большая ошибка. Подскажите как правильно подключить его в мою конструкцию?

var userClickedSave = false; 
jsubmitbtn.addEventListener('click', (e)=> 
{ 
  e.preventDefault(); 
  userClickedSave = true; 
  Joomla.submitbutton('article.save'); 
});	 
 
window.addEventListener("beforeunload", function (e) { 
  if (userClickedSave) 
      return; 
 
    var confirmationMessage = "1"; 
 
    (e || window.event).returnValue = confirmationMessage; //Gecko + IE 
    return confirmationMessage;                            //Webkit, Safari, Chrome 
}); 
// удаляем строку из таблицы резервирования алиаса при обновлении или покидании страницы 
$(window).unload(function () { 
  $.ajax({ 
    type: "POST", 
    url: '../еее/file.php', 
    async : false, 
    data: { 
      'aaa': aaa, 
      'bbb': bbb 
    }, 
    success: function(response) { 
//								    console.log(response); 
    }, 
    error: function() { 
      console.log('ошибка!'); 
    } 
  }); 
}); 
}

<button type="button" id="jsubmitbtn" class="btn btn-primary itemsave" onclick="userClickedSave = true;Joomla.submitbutton('article.save')"> 
  <span class="icon-ok"></span><?php echo JText::_('JSAVE') ?> 
</button>

Решение (в моем случае)

и оба очень помогли, большое вам спасибо! Отмечу как "ответ" (только не знаю можно ли оба, наверное нет). не полностью решался вопрос вашими ответами, но видимо я не верно задал его.

var userClickedSave = false; 
jsubmitbtn.addEventListener('click', (e)=> 
{ 
  e.preventDefault(); 
  userClickedSave = true; 
  Joomla.submitbutton('article.save'); 
}); 
 
function pageCleanup() 
{ 
  if (!userClickedSave) 
    { 
    // удаляем строку из таблицы резервирования алиаса при обновлении или покидании страницы 
    unloadDelAjax(); // фнкция с ajax запросом 
  } 
} 
 
$(window).on('beforeunload', function (e) 
{ 
  if (userClickedSave) 
    return; 
  var confirmationMessage = "1"; 
 
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE 
  return confirmationMessage;            
  //this will work only for Chrome 
  pageCleanup(); 
}); 
 
$(window).on("unload", function () 
{ 
  //this will work for other browsers 
  pageCleanup(); 
});

Answer 1

<script>
  var userClickedSave = false;
</script>
<div class="btn-group">
  <button type="button" id="jsubmitbtn" class="btn btn-primary itemsave" onclick="userClickedSave = true;Joomla.submitbutton('article.save')">
    <span class="icon-ok"></span>Сохранить              </button>
</div>

window.addEventListener("beforeunload", function (e) {
  if (userClickedSave)
    return;
  var confirmationMessage = "1";
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

Answer 2

jsubmitbtn.addEventListener('click', (e)=>
{
    e.preventDefault();
    userClickedSave = true;
    Joomla.submitbutton('article.save');
});

Вызов preventDefault предотвратит стандартное поведение браузера (редирект)

Создание сайта для салона красоты в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Передача данных с полей страницы [требует правки]

Существует форма допустим состоящее с

267

HTML

Не работает маска ввода

Есть некий select, от выбора которого зависит какие 2 инпута будут выведены

284

HTML

Как сделать блок ссылкой?

Заказчику срочно понадобилось, чтобы блок стал ссылкой, но внутри этого блока есть и куча разметки, в том числе, и самостоятельных тегов <a>В...

229

HTML

Загрузить HTML из файла в JavaScript

Я использую AngularJS В одном из сервисов, который используется для построения уведомлений, у меня есть следующий шаблон:

221