- Oracle APEX Cookbook(Second Edition)
- Marcel Van Der Plas Michel Van Zoest
- 647字
- 2021-07-23 15:34:42
Adding JavaScript code to your application>
JavaScript can also be used for client validation. We will build a validation on the salary
field. When the user raises the salary by more than 10 percent, an alert box will appear where the user can confirm the salary.
Getting ready
Make sure you have a tabular form based on the EMP
table. At least the salary
column should be present in the form.
How to do it...
- In the Application Builder, go to the page based on the
EMP
table. - In the Regions section, click on the Report link:
- Click on the Edit icon (the pencil) near the SALARY column:
- In the Column Attributes section, enter the following in the Element Attributes text field:
onfocus=remember_oldsal(this.value); onchange=validate_sal(this.id,this.value); [9672_03_01.txt]
- Click on the Apply Changes button, and after that click again on it.
- In the Page section, click on the Edit icon.
- In the HTML Header and HTML Body Attribute section, enter the following in the HTML Header textarea:
<script type="text/javascript"> var oldsal = 0; function remember_oldsal(salary) { oldsal = salary; } function validate_sal(sal_id, salary) { if (salary > (oldsal * 1.10)) { var r = confirm("Are you sure you want to change this salary to " + salary); if (r == false) { $("#"+sal_id).val(oldsal); } } } </script> [9672_03_02.txt]
The header now contains two JavaScript scripts and a variable declaration. This variable declaration is necessary because if the variable had been declared in a function, it wouldn't have been accessible. The function
REMEMBER_OLDSAL
copies the salary when the user navigates to thesalary
field. The functionVALIDATE_SAL
calculates the old salary raised by 10 percent, and if the new salary is greater than the old salary plus 10 percent, a popup alert is displayed. If the Cancel button is clicked (r == false
), the value of the variableoldsal
is copied to thesalary
column. Otherwise, newly entered salary is kept as is. - Click on the Apply Changes button.
- Run the form and see what happens if you change a salary by more than 10 percent.
How it works...
Everything you put in the HTML Header section will be presented in the HTML header of the page. You can see this by right-clicking on the page and selecting View Source. You will then see the HTML code which is used to present the page. On the top of the code, you can see your JavaScript code.
The JavaScript functions can be called from objects in the web page. For example, you can call a JavaScript function when the user navigates to a text item or when the body of a web page is loaded.
Items can be identified by an ID or a name, and you can get or set the value of items with the jQuery function $("#ITEM").val()
, in the following manner:
Variable = $("#P18_ID").val();
To do the same prior to APEX 4, you had to use the following:
Variable = document.getElementById(id).value;
You can also put values into the items with the following function:
$("#P18_ID").val(5000);
Or, use the following prior to APEX 4:
document.getElementById(id).value = 5000;
And you can also use the following jQuery syntax to copy values between items:
$("#P18_NAME").val($("#P18_TEXT").val());
In APEX, you can add a call to a JavaScript function in the Element Attributes section of the item.

There's more...
There are various ways to include JavaScript code in the page. You can not only put JavaScript code in the HTML header of the page or the region source, but you can also put some JavaScript code in the item. Go to the item and type your code in the HTML section.
Since APEX 4, working with JavaScript has been made easy with the use of dynamic actions, region display selectors, and plug-ins. This recipe is included only to show how JavaScript works in APEX, but if you can, use the new features. They will save you a lot of work.
- Mastering Node.js(Second Edition)
- RCNP實驗指南:構(gòu)建高級的路由互聯(lián)網(wǎng)絡(luò)(BARI)
- FreeSWITCH 1.2
- GPS/GNSS原理與應(yīng)用(第3版)
- 異構(gòu)基因共表達(dá)網(wǎng)絡(luò)的分析方法
- TCP/IP入門經(jīng)典(第5版)
- Force.com Development Blueprints
- 物聯(lián)網(wǎng)概論(第2版)
- Windows Server 2003 Active Directory Design and Implementation: Creating, Migrating, and Merging Networks
- Microservice Patterns and Best Practices
- 5G技術(shù)核心與增強:從R15到R17
- 網(wǎng)絡(luò)安全之道
- Laravel Application Development Cookbook
- Hands-On Reactive Programming in Spring 5
- Migrating to Drupal7