Oracle Apex: Show or Hide DOM Elements Using JavaScript

In Oracle Apex, use $x_Show() and $x_Hide() JavaScript API methods to show or hide DOM elements.

A DOM element can be a region, button, page item, etc. But except page item, other elements such as regions and buttons must have a static id specified because $x_Show() and $x_Hide() uses the DOM node as an argument. Below is the syntax for both the methods:

$x_Show(pNd); //  Shows the specified DOM element

$x_Hide(pNd); // Hides the specified DOM element

In the following example, it will demonstrate how to show or hide a button in Oracle Apex using the JavaScript:

Show or Hide Button in Oracle Apex using JavaScript

On your page, click on the button and specify the static id for the button as shown in the image below:

NOTE: A static id for an element should be unique, meaning you can not assign the same static id to another element on the same page.

You can now hide this button using the following JavaScript command:

$x_Hide("btnDel");

To show the button back:

$x_Show("btnDel");

Suppose you want to hide the button if the primary key field is null. Check the following example for it:

if (apex.item("P2_EMPNO").isEmpty()) {
   $x_Hide("btnDel");
} else {
   $x_Show("btnDel");
}

Show or Hide Region in Oracle Apex using JavaScript

Specify the static id for the region and show or hide, as shown in the below example:

$x_Hide("rgnEmp"); // it will hide the region having static id rgnEmp

To show it back:

$x_Show("rgnEmp"); // it will show the region having static id rgnEmp

Show or Hide a Page Item in Oracle Apex using JavaScript

For a page item such as text field, numeric item, and select list, you don't need to specify the static id for them.

Use their names in place of static id to show or hide them. In the below example, it will hide the page item P2_ENAME:

$x_Hide("P2_ENAME");

Reference: Oracle Apex API reference

Related tutorial:

• JavaScript: On Close Tab Show Warning Message