...

Получение элемента страницы и добавление на него обработчика события

Тема в разделе "Примеры решений и дополнительных модулей", создана пользователем prilukov, 29 мар 2022.

  1. prilukov

    prilukov Новичок

    В данной статье на примере блокирования кнопки сохранения нового элемента приложения показано, как в виджете-код получить элемент страницы, а на примере запуска процесса при удалении элемента приложения показано, как добавить обработчик события нажатия на кнопку удаления и как запустить «родное» действие (в данном случае прерывание процессов и задач, связанных с удаляемым элементом) вместе с кастомным действием.

    1. Блокирование кнопки сохранения элемента, если не заполнено обязательное поле «роль сотрудника» (сценарий в виджете-код на форме создания):
    Код:
    
    <script>
        $(
    document).ready(() => {
            <!-- 
    создаем свойство глобального объекта window "saveButton" -->
            
    window.saveButton document.querySelector('footer.modal-footer button.btn.btn-primary') ;
            <!-- 
    Отключаем кнопку при загрузке страницы -->
            if(
    window.saveButton){
                
    window.saveButton.disabled true;
            }
        })
    </script >
    Сценарий при изменении значения переменной «роль сотрудника» во вкладке клиентских сценариев:
    Код:
    
    declare const window:any;

    async function onEmployeeRoleChange(): Promise<void> {
        if(
    window.saveButton){
            if(
    Context.data.employeeRole!.length>0){
                
    window.saveButton.disabled false;
            }
            else{
                
    window.saveButton.disabled true;
            }
        }
    }
    [​IMG]
    [​IMG]

    2. Добавление обработчика события для кнопки удаления элемента и запуск процесса при нажатии на неё (виджет-код на форме просмотра):
    Код:
    
    <script>
        <!-- 
    Ожидаем загрузку страницы -->
        $(
    document).ready(async () => {
         <!-- 
    получаем кнопку удаления на форме просмотра -->
            var 
    externalButton document.querySelector('footer.modal-footer button.btn.btn-danger');
            if(
    externalButton){
             <!-- 
    Добавляем обработчик события нажатия этой кнопкипри нажатии будет вызвана функция  -->
                
    externalButton.addEventListener("click",CreateListenerForPopOverButton)
            }
        })
          function 
    CreateListenerForPopOverButton(){
          <!-- 
    Ожидаем загрузку страницы -->
           $(
    document).ready(async () => {
          <!-- 
    получаем кнопку удаления на всплывшем окне удаления -->
                var 
    innerButton =  document.querySelector('div.popover-outer.visible button.btn.btn-danger[type=submit]');
          <!-- 
    Добавляем обработчик события нажатия этой кнопкипри нажатии будет вызвана функция-->
          <!-- 
    из вкладки клиентских сценариев-->
                
    await innerButton.addEventListener("click",<%= Scripts%>.RunProcessOnDeleteButtonClick)
            })
        }  
    </script >
    Функция RunProcessOnDeleteButtonClick на вкладке клиентских сценариев:
    Код:
    
    async function RunProcessOnDeleteButtonClick(): Promise<void> {
        
    await Application.processes.your_process.run({});            
    }
  2. d.sakhnova

    d.sakhnova Участник

    Большое спасибо за пример. Очень жаль, что про конструкцию <%= Scripts%> ничего не сказано в справке. Более того, в ноябре 21го года ТП не смогла мне ответить на вопрос - как из виджета код вызвать функцию из вкладки Скрипты. Еще раз огромное вам спасибо
  3. sultan.sarazbanov

    sultan.sarazbanov Новичок

    К сожалению не работает. Обработчик событий не отрабатывает при клике.
  4. kurbatov-la

    kurbatov-la Активный участник

    Попробуйте так
    Код:
    
    <%= Scripts%>.RunProcessOnDeleteButtonClick()
    
    
  5. sultan.sarazbanov

    sultan.sarazbanov Новичок

    Добрый день, дело не в скрипте, дело именно в addEventListener, используя ваш пример и сразу вызывая функцию она отрабатывает сразу при открытии, при передаче функцию референсом типа:

    Код:
    
    $(document).ready(async () => {
            var 
    externalButton document.querySelector('footer.modal-footer button.btn.btn-danger');
            if(
    externalButton){
                
    externalButton.addEventListener("click",function() { console.log('test')})
        })
    Она не отрабатывает
  6. nosova.olga

    nosova.olga Участник

    Добрый день. Есть 2 приложения, допустим А и Б. Логика по блокированию кнопки реализован при добавлении нового элемента приложения Б. Но в карточке приложения А есть кнопка +Создать элемент приложения Б и в случае создания нового элемента приложения Б получается окно Б поверх окна А и тогда блокируется кнопка формы А, а не Б. это как-то можно исправить, чтобы логика отрабатывала именно с формой Б всегда, даже если она поверх другой формы?
  7. dekarh3

    dekarh3 Участник

    Пробовал в форме задачи и
    await innerButton.addEventListener("click",<%= Scripts%>.RunProcessOnDeleteButtonClick)
    и
    await innerButton.addEventListener("click",<%= Scripts%>.RunProcessOnDeleteButtonClick())
    Первый не срабатывает вообще, второй срабатывает при загрузке формы. При этом если просто сделать кнопку в виджете код:
    <button onclick="<%= Scripts %>.RunProcessOnDeleteButtonClick()">test</button>
    то всё срабатывает.
    Как можно добиться чтобы работал addEventListener в форме задачи?

    Ps. document.querySelector элемент находит, проверил.
    Последнее редактирование: 4 дек 2023