Interactive grid in modal dialog cannot be selected anymore via jQuery

Question

Background Information:

Our situation

At work we have created multiple apps and a few of them make use of an interactive grid inside of a modal dialog page. Last week we upgraded from Oracle APEX 19.1 to Oracle APEX 21.1 .
The problem described below didn't exist in version 19.1.
(If important: We have to support Google Chrome on Windows)

How to navigate to the IG

In all our cases the interactive grid can be reached by:

• nagivating to page x
• open modal dialog y
• from modal dialog y open modal dialog z (via a branch after page processing)
  => the interactive grid can be found in modal dialog z

Aim and preparations

We only want to give the users access to a few interactive grid functionalities. For this reason we gave each IG a static id.

What still works

The modal dialog opens and the interactive grid is displayed normally.

Our Problem

Up until the upgrade the following snippet removed some functionality of the respective IG:

$(window).on("load", function() {
    var actions = apex.region("example_ig_id").widget().interactiveGrid("getActions");
    actions.remove("selection-copy-down");
    actions.remove("selection-fill");
    actions.remove("selection-clear");
    actions.remove("single-row-view");
    actions.remove("selection-copy");
});

But since upgrading to version 21.1 apex.region("example_ig_id") returns null. The dom element also can't be found via $("#example_ig_id").

What we found out and tried

In the google chrome developer tools the div with id example_ig_id is visible under elements. After loading the page, then clicking into the class attribute of the div (via developer tools) to edit it (no need to realy edit anything) and canceling it, apex.region("example_ig_id") isn't returning null anymore. That also works if I edit its direct or indirect parent elements (also tested with the iframe of the modal dialog containing the IG).

Since finding that out i tried to work around the problem with forcing a refresh or a reflow. I tested multiple of the answers given here: Force DOM redraw/refresh on Chrome/Mac
The tests I tried (in the inline console) all didn't solve my problem:

$("iframe").each(function(){$(this).addClass("testClass"); $(this).removeClass("testClass");});

and:

$("iframe").each(function(){$(this).hide(); $(this).show(0);});

and:

$("iframe").each(function () {
    $(this).css("opacity", .99);
    setTimeout(function () {
        $(this).css("opacity", 1);
    }, 20);
});

I used the iframe of the modal dialog itself since it is selectable from the start.

I am not sure if I made a mistake but help would be much appreciated.

Answer 1

At this point I got help and the problem is solved.

Instead of defining this'

$(window).on("load", function() {
    var actions = apex.region("example_ig_id").widget().interactiveGrid("getActions");
    actions.remove("selection-copy-down");
    actions.remove("selection-fill");
    actions.remove("selection-clear");
    actions.remove("single-row-view");
    actions.remove("selection-copy");
});

inside the page under

Function and Global Variable Declaration

pasting just the function content

var actions = apex.region("P7_SAVED_JOBS_IG").widget().interactiveGrid("getActions");
actions.remove("selection-copy-down");
actions.remove("selection-fill");
actions.remove("selection-clear");
actions.remove("single-row-view");
actions.remove("selection-copy");

into the page under

Execute when Page Loads

did the trick.

I don't know if the execution time of the event handler was too early or if it had something to do with the iframe and its context.