Как зарегистрироваться в событии onClick элемента «Закрыть» - PullRequest
Новая
       7

Как зарегистрироваться в событии onClick элемента «Закрыть»

0 голосов
/ 15 января 2019

Я использую действие пользовательского интерфейса в serviceNow для вызова всплывающего окна GlildeModalForm. В этом окне есть X (кнопка закрытия), которую мне нужно перехватить, когда пользователь нажимает эту кнопку. У меня нет отзывов об этом нажатии кнопки, и мне нужно отловить

Я видел некоторый пример в сообществе ServiceNow, где вы можете зарегистрироваться в некоторой функции обратного вызова, но она используется только после отправки формы. 

var modalForm = new GlideModalForm('Create User Member' , tableName );
modalForm.setOnloadCallback(formOnLoadCallback);
modalForm.setCompletionCallback(formAfterSubmitCallback);
modalForm.render();

function formOnLoadCallback() {
//Access GlideModal g_form to set field for the new record
var d_form = window.frames["dialog_frame"].g_form;
d_form.setValue('field', g_form.getValue('field'));
d_form.setValue('field', g_form.getValue('field'));
}

function formAfterSubmitCallback(action_verb, sys_id, table, displayValue) {
//Get the newly created record sys_id and then set e.g a value to the starting record
g_form.setValue('field', sys_id);
//Save the record
g_form.save();
}

Используя инспектор элементов моего браузера, я вижу, что кнопка Закрыть определяется следующим образом: 

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal">                 <span 
class="sr-only">Close</span>                
</button>

Мне нужно найти эту кнопку из приведенного выше скрипта, а затем зарегистрироваться в ее onClick, а затем в onClick, даже если бы я просто хотел отправить предупреждение о потенциальной потере данных

Спасибо за помощь в этом

Ответы [ 3 ]

0 голосов
/ 15 января 2019

Поскольку события щелчка всплывают в DOM, вы можете просто зарегистрировать прослушиватель щелчков на document. Объект события автоматически передается в функцию-обработчик, которую вы передаете addEventListener(). Внутри обработчика вы можете проверить, было ли вызвано событие click для элемента с data-dismiss="GlideModal": 

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"]') {
    alert ('Close modal clicked');
  }
})

Это называется слушателем события делегата, потому что слушатель не зарегистрирован на элементе, на котором вы ожидаете, что событие произойдет, но выше дерева DOM. Это также имеет то преимущество, что работает для динамически создаваемых элементов (например, предположительно, вашего модального HTML).

Редактировать: Я просто дважды проверил показанный вами HTML. Возможно, вам придется проверить, происходит ли щелчок с span внутри кнопки, а не с самой кнопки: 

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"] span') {
    alert ('Close modal clicked');
  }
})
0 голосов
/ 15 января 2019

SerivceNow GlideModalForm расширяет GlideModal, который поддерживает регистрацию событий методом on. Есть 2 поддерживаемых события, которые могут работать на то, что вы хотите:

  • closeconfirm: вызывается методом destroy, может использоваться для отмены уничтожения
  • beforeclose: вызывается, когда окно уже скрыто

Я думаю, что вы можете просто использовать событие closeconfirm, чтобы знать, когда происходит закрытие, вам не обязательно заботиться об отмене действия, и оно сработает, как только пользователь нажмет кнопку, но перед окном устранен. Примечательно, однако, что, вероятно, также срабатывает, когда пользователь нажимает кнопку «Закрыть» (не X), которая необязательно отображается через модальное предпочтение: myGlideModal.setPreference('sysparm_button_close', 'Close')

Вот пример: 

var myGlideModal = new GlideModal(...);
dd.on("beforeclose", function (){ /* do stuff, maybe return false to cancel */ });
0 голосов
/ 15 января 2019

Вы можете создать функцию onclick следующим образом:

HTML: 

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal" onclick="myFunction()">                 
  <span class="sr-only">Close</span>                
</button>

JavaScript: 

function myFunction() {
  alert("I am an alert box!");
}
...