javascript - Interacting of modal dialog windows with iframes in Oracle APEX 4

Question

At this moment I have the following task to solve in Oracle APEX. In the application I have three pages – let them call 100, 101 and 102. The page 101 is accessible from the page 100 by the means of opening a modal dialog window with iframe, and so is the page 102 from the page 101.

The problem is that I can’t make the modal dialog with the page 102 bigger than the one with the page 101, because the first one contains in the second one, not just lies above it. I can execute the modal window with the page 102 from the page 100, but then, solving the problem with the window’s size, I get another problem: in this case I can’t execute JavaScript functions on the page 102 so that their result would immediately influence on the page 101 - in other words, the pages 102 and 101 don’t interact correctly.

The code which opens a modal dialog is similar on the pages 100 and 101:

function showPageX(callBack) {
 $('#divDialogIFrameID').attr("src","<the source link>");
 $('#divDialogID').dialog({
   title:'The Dialog’s Title',
   modal:true,
   width:600,
   height:600,
   resizable:true,
   close: callBack
 });
}

#divDialogID is the id of the page region, which display point is “After Header” and which source is this:

<div style="display:none" id="divDialogID">
<iframe id="divDialogIFrameID"></iframe>
</div>

The JavaScript function on the page 101 which should be executed from the page 102 is like that:

function refreshData(someParameter){
  $("#some_101_report").trigger('apexrefresh');
  //…some more code with using “someParameter”…
}

In the case of opening the modal window with the page 102 from the page 101 I just need to call the function as follows:

parent.refreshData(<someParameter value>);

I tried to make the page 102 work while opened from the page 100 using this code in the first one:

//the function which replaces “refreshData”
function synchPages(){
  var command = {action: 'refreshData'
                ,params: {someParameter: <someParameter>}
                };
  window.top.postMessage(command,'*');
}

and using this code in the second one:

function eventsListener(event){
  var command = event.data;

  if (command.action == 'refreshData'){
    refreshData(command.params.someParameter);
  }
}

//this function is executed when page loads
if (window.addEventListener) window.addEventListener("message",eventsListener,false);
else window.attachEvent("onmessage",eventsListener);

but it didn’t work – it seems like the page 101 doesn’t “hear” the “messages” at all.

I use Oracle 11g, the version of Oracle APEX is 4.2.6.00.03.

question from:https://stackoverflow.com/questions/65916412/interacting-of-modal-dialog-windows-with-iframes-in-oracle-apex-4

Answer 1

Waitting for answers