CODEWITHSUNDEEP
oracle-apex-23
McRivers
McRivers

Reputation: 373

Oracle APEX 23.2 - Switch Page Item Not Updating

I am trying to understand how APEX handles Switch page items in the DOM and how to get the current value/state of a switch page item. I have the switch set up to use values of 'Y' or 'N'.

Whenever I toggle the switch to the "off" or "no" position the input value (in HTML DOM) does not seem to update from 'Y' to 'N'.

The sample page/app is linked below to better show what I mean. If you toggle the native switch page item, the value always seems to be 'Y'. When I submit the page, I see the correct value saved in session state, when the page is reloaded. So how is the switch value set/fetched? The DA mentioned above uses the following code:

let switchVal = $(this.triggeringElement).val();
alert(switchVal);

https://apex.oracle.com/pls/apex/r/mcrivers/test-switch/switch-test

What am I misunderstanding? How do I get the current value of the switch item based on its toggle state? Is there a hidden input somewhere in the DOM that I am missing?

Upvotes: 0

Views: 400

Answers (1)

McRivers
McRivers

Reputation: 373

I looked into this more and was able to figure out what was going on. I noticed that the HTML being generated from APEX_ITEM.SWITCH api was different than the HTML being rendered in the DOM of the browser at runtime. The browser kept adding an <a-unsafe-html> tag around the html for the switch element.

We recently just upgraded APEX from 19.2 to 23.2, and found this in the 23.1 Changed Behavior docs regarding HTML Sanitization.

APEX now sanitizes all HTML and strips out any inline JavaScript or events (e.g. onclick) - which is why the switch was not updating the value correctly as this is done with an inline onclick event. The resolution is to change the column from Rich Text/HTML to Plain Text/Escape Characters off so that the inline javascript is not stripped out of the DOM.

I hope this helps someone in the future, as I wasted a few days on it and posting a solution to hopefully save others time if they come across this.

HTML Output: [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 Output: [Type: Rich Text, Format: 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 Output [Type: Plain Text, Escape special characters: Off]
<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>

Upvotes: 0

Related Questions