Oracle APEX 23.2 - 切换页面项目未更新

Question

我试图了解 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 中是否有我丢失的隐藏输入？

Answer 1

我对此进行了更多研究，并能够弄清楚发生了什么事。我注意到从 APEX_ITEM.SWITCH api 生成的 HTML 与运行时在浏览器 DOM 中呈现的 HTML 不同。浏览器不断在 html 周围添加一个

<a-unsafe-html>

标签作为 switch 元素。

我们最近刚刚将 APEX 从 19.2 升级到 23.2，并在有关 HTML 清理的 23.1 更改行为文档中找到了this。

APEX 现在会清理所有 HTML 并删除任何内联 JavaScript 或事件（例如 onclick） - 这就是开关无法正确更新值的原因，因为这是通过 onclick 事件完成的。解决方案是将列从富文本/HTML 更改为关闭纯文本/转义字符，以便内联 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>