Oracle APEX 23.2 — элемент страницы переключения не обновляется
Я пытаюсь понять, как APEX обрабатывает элементы страницы переключения в DOM и как получить текущее значение/состояние элемента страницы переключения. У меня переключатель настроен на использование значений «Y» или «N».
Всякий раз, когда я переключаю переключатель в положение «выключено» или «нет», входное значение (в HTML DOM), похоже, не обновляется с «Y» на «N».
Пример страницы/приложения приведен ниже, чтобы лучше показать, что я имею в виду. Если вы переключите собственный элемент страницы переключения, значение всегда будет выглядеть как «Y». Когда я отправляю страницу, я вижу правильное значение, сохраненное в состоянии сеанса, когда страница перезагружается. Итак, как же устанавливается/выбирается значение переключателя? Упомянутый выше DA использует следующий код:
let switchVal = $(this.triggeringElement).val();
alert(switchVal);
https://apex.oracle.com/pls/apex/r/mcrivers/test-switch/switch-test
Что я неправильно понимаю? Как получить текущее значение элемента переключателя на основе его состояния переключения? Есть ли где-то в DOM скрытый ввод, которого мне не хватает?
Ответы 1
Я изучил это подробнее и смог понять, что происходит. Я заметил, что HTML, созданный из API APEX_ITEM.SWITCH, отличается от HTML, отображаемого в DOM браузера во время выполнения. Браузер продолжал добавлять тег <a-unsafe-html> вокруг html элемента переключателя.
Недавно мы только что обновили APEX с 19.2 до 23.2 и нашли это в документации по измененному поведению версии 23.1, касающейся санации HTML.
APEX теперь очищает весь HTML и удаляет любой встроенный JavaScript или события (например, onclick) — именно поэтому переключатель не обновлял значение правильно, как это делается с помощью встроенного события onclick. Решение состоит в том, чтобы изменить столбец с форматированного текста/HTML на обычный текст/Escape-символы, чтобы встроенный JavaScript не удалялся из DOM.
Я надеюсь, что это поможет кому-то в будущем, поскольку я потратил на это несколько дней и опубликовал решение, которое, надеюсь, сэкономит время другим, если они столкнутся с этим.
Вывод HTML: [APEX_ITEM.SWITCH api]
<div id = "consent-item-1_group" class = "apex-button-group apex-item-group apex-item-group--switch" role = "group" aria-label = "consent-item-1">
<span class = "apex-item-option apex-item-option--yes">
<input type = "radio" id = "consent-item-1_Y" name = "consent-item-1_NOSUBMIT" value = "Y" checked = "checked" required onclick = "$x_Value('consent-item-1',this.value)">
<label for = "consent-item-1_Y" class = "a-Button">Yes</label>
</span>
<span class = "apex-item-option apex-item-option--no">
<input type = "radio" id = "consent-item-1_N" name = "consent-item-1_NOSUBMIT" value = "N" required onclick = "$x_Value('consent-item-1',this.value)">
<label for = "consent-item-1_N" class = "a-Button">No</label>
</span>
<input type = "hidden" name = "f03" value = "Y" id = "consent-item-1" autocomplete = "off">
<input type = "hidden" name = "f01" value = "325">
<input type = "hidden" name = "f02" value = "4">
</div>
Вывод HTML: [Тип: форматированный текст, формат: HTML]
<div class = "t-ContentRow-selection">
<a-unsafe-html class = "is-processed">
<input autocomplete = "off" id = "consent-item-1" value = "Y" name = "f03" type = "hidden">
<label aria-label = "consent-item-1" class = "a-Switch" for = "consent-item-1_switch">
<input checked = "checked" class = "consent-item-switch" data-off-label = "No" data-off-value = "N" data-on-label = "Yes" value = "Y" id = "consent-item-1_switch" type = "checkbox">
<span class = "a-Switch-toggle"></span>
</label>
<input value = "325" name = "f01" type = "hidden">
<input value = "4" name = "f02" type = "hidden">
</a-unsafe-html>
</div>
Вывод HTML [Тип: обычный текст, экранирование специальных символов: выключено]
<div class = "t-ContentRow-selection">
<input type = "hidden" name = "f03" value = "Y" id = "consent-item-1" autocomplete = "off">
<label for = "consent-item-1_switch" class = "a-Switch" aria-label = "consent-item-1">
<input type = "checkbox" id = "consent-item-1_switch" value = "Y" data-on-label = "Yes" data-off-value = "N" data-off-label = "No" class = "consent-item-switch" checked = "checked" onclick = "$x_Value('consent-item-1',$(this).prop('checked') ? this.value : $(this).data('off-value'))">
<span class = "a-Switch-toggle"></span>
</label>
<input type = "hidden" name = "f01" value = "325">
<input type = "hidden" name = "f02" value = "4">
</div>