Incorporating JavaScript in Oracle Application Express
In Oracle APEX you use JavaScript attribute
of the page to include JavaScript into your applications. This is a cgood
approach for functions that are very specific to a page and a convenient way to
test a function before you include it in the
.js file.You are provided the following two options to add JavaScript code to the JavaScript attribute:
Function and Global Variable Declaration - Enter JavaScript code (for example, functions or
global variable declarations) for code to be used on this page (see page 111 of
the book). If the code is used on multiple pages, consider putting it into an
external JavaScript file to avoid duplication.
Execute When Page Loads - Enter JavaScript code to execute when the page loads.
The code is executed after the JavaScript code generated by Oracle Application
Express. For example, adding the following would test a function accessible
from anywhere on the current page.
function test(){window.alert('This is a test.');}
On page 111 of my book "Create Rapid Web Applications Using Oracle Application Express", the first approach is used to declare a function named productPopup as shown below:
function test(){window.alert('This is a test.');}
On page 111 of my book "Create Rapid Web Applications Using Oracle Application Express", the first approach is used to declare a function named productPopup as shown below:
function
productPopup(productID) {
var url;
url = 'f?p=&APP_ID.:20:&SESSION.::::P20_PRODUCT_ID:'
+ productID;
html_PopUp(url,'ProductInfo',700,400,1,1);
};
This function is called from PL/SQL code on page 113 and 114 using the parameter productID:
<a href="javascript:productPopup(''' || product_id || ''');">' || sys.htf.escape_sc(product_name) || '</a>
and
<a href="javascript:productPopup('''||c1.pid||''');">'||c1.i||'</a>
The url variable contains the value that creates link between pages in the
application. Here, it calls Page 20 of our application to display product
details. P20_PRODUCT_ID is a hidden item on Page 20 (see page 123) to represent
product ID. Html_PopUP is a function provided by APEX which opens a
page in a popup using the specified url variable value, page name and
dimensions. The complete syntax of html_popup is: html_PopUp(pURL,pName,pWidth,pHeight,pScroll,pResizable).
How it
works
When you
proceed to step 2 in order placement wizard, the PL/SQL code (mentioned above)
creates a hyperlink for each product. Upon clicking any product link, the ID of
that product is conveyed to the function “productPopup“ which, initially, creates
a complete url by adding the product ID and finally displays a new popup window
showing details about the selected product.
You can
add multiple JavaScript functions as tested here. Make a duplicate of the above
function by copying it under the existing one with the changes shown in bold as
under:
function productPopup(productID) {
var url;
url =
'f?p=&APP_ID.:20:&SESSION.::::P20_PRODUCT_ID:' + productID;
html_PopUp(url,'ProductInfo',700,400,1,1);
};
function productPopup2(productID) {
var url;
url =
'f?p=&APP_ID.:20:&SESSION.::::P20_PRODUCT_ID:' + productID;
html_PopUp(url,'ProductInfo',1000,100,1,1);
};
In the
Select Items PL/SQL under Regions, change the function name in Display Current
Order section to point to the above entry:
<a
href="javascript:productPopup2('''||c1.pid||''');">
Apply
changes and run the page. First, click any product under the product section.
You’ll see the same Product Info page that used to appear. Click the Add>
link to add a product to the Current Order section. Click the product here,
this time the second function productPopup2 will be called displaying product
info in a page having a width of 1000 pixels.
