Here is an example to open a modal dialog page using JavaScript in Oracle Apex.
This example will call a modal dialog page (page number 27) from a normal page (page number 25). Page 25 having a page item P25_EMP_ID, which we will pass to Page 27's item P27_EMP_ID.
JavaScript Code to Open a Modal Dialog Page
Create a dynamic action on the button's click event or any other object. Create a True action to execute the JavaScript code and add the following code in it:
var x = apex.item('P25_EMP_ID').getValue();
var url = "f?p=#APP_ID#:27:#SESSION#::NO:RP,27:P27_EMP_ID:#P25_EMP_ID#";
url = url.replace("#APP_ID#", $v("pFlowId"));
url = url.replace("#SESSION#", $v("pInstance"));
url = url.replace("#P25_EMP_ID#", x);
apex.server.process("PREPARE_URL", {
x01: url
}, {
success: function(pData) {
if (pData.success === true) {
apex.navigation.redirect(pData.url);
} else {
console.log("FALSE");
}
},
error: function(request, status, error) {
console.log("status---" + status + " error----" + error);
}
});In the above code, change the items and values as explained below:
- Line-1: var x will store the value of the source page's P25_EMP_ID value. Change it with your source page item name.
- Line-2: URL variable is creating the Oracle Apex page URL for the modal dialog. Change 27 values in URL to your modal dialog page number. Change the P27_EMP_ID item with your modal dialog page item. Change P25_EMP_ID with your source page item.
- Apex server process name is PREPARE_URL; use this same name to create the Ajax process as explained below.
Create an Ajax Callback Process
Now click on the process tab and create a new Ajax callback process named PREPARE_URL and add the following PL/SQL code in it:
declare
result varchar2(32767);
begin
result:=apex_util.prepare_url(apex_application.g_x01);
apex_json.open_object;
apex_json.write('success', true);
apex_json.write('url', result);
apex_json.close_object;
exception
when others then
apex_json.open_object;
apex_json.write('success', false);
apex_json.write('message', sqlerrm);
apex_json.close_object;
end;It is done. Now when you click on the button, it will open the modal dialog page you have set.
Reference: Question: Dynamic Action Redirect To Another Page in Oracle Apex
VFP George
Hi Vinish, hope you are well?
I came across your solution here and it works well to access a variable that is only on the FORM after loading etc.
However, when I call my page form (created with the wizard - only change was to make create/update buttons conditional on SQL (Rows returned/not returned, based on value passed in URL), not ITEM, I have the following problem: In "Edit" mode it always fails with an (Oracle) message "No data Found". This is because the form does NOT load data from the table (even if there is a match for the value passed on the URL).
So, the form needs to (1) create a new record if the value passed to it does NOT exist in the table yet. The Primary Key Field in the Table MUST be the value passed on the URL.
Otherwise the form needs to (1) edit an existing record if the value passed to it does NOT exist in the table yet.
Notes:
(i) in my application the passed value will NEVER be empty. The first call to the form will NEVER expect a record that matched the passed value. IE this call is the ONLY way a record can be created in my table.
(ii) my table has no constraints at this time. It should not need them if the logic does not fail, so I removed them for testing purposes.
Any idea what I might be doing that is so messing me up? I spent 5 hours trying to make this work 🙁
(FWIW - this whole exercise is to create some data for the gantt chart that I recommended here recently).
Mohamed
Hi Vinish,
I applied this solution in my application and it work perfect. the only problem that I have is when closing this modal window the dynamic action "Modal closed" never fire.
I removed the JavaScript code and used action "Redirect to page in this application" in the button, then dynamic action worked again.
I use the JavaScript code only because I want to send a select list value to the modal window without submitting the main window.
Is there a solution/workaround for this issue?
Vinish Kapoor
When opening the dialog using JS, then on the parent page, handle the close dialog event using the JavaScript expression Window. Try this it should work.
Ozren
Hi Vinish,
I am new to APEX. I tried your code and it works fine.
Question: what changes should be made if I want to trigger this code but from triggering element ( not a button ). Like it is specified in apex_util.prepare_url documentation?
Thank you,
Ozren
najeeb alikhel
Hello
if we want to pass more than one parameters to page 27 how to do it?