Oracle APEX Cookbook - Second Edition

Recent

Topics

NEXT

PREV

3. Extending APEX

Highlights

Settings

Creating a tag clou

Adding JavaScript code to your

application

Feedback

JavaScript can also be used for client validation. We will build a validation
on the salaryfield. When the user raises the salary by more than 10

Sign Out

percent, an alert box will appear where the user can confirm the salary.

Settings

Getting ready

10 days left in your trial.

Make sure you have a tabular form based on the EMPtable. At least the
salarycolumn should be present in the form.

Subscribe.

Feedback

How to do it...
Sign Out

1. In the Application Builder, go to the page based on the EMPtable.

2. In the Regions section, click on the Report link:

3. Click on the Edit icon (the pencil) near the SALARY column:

4. In the Column Attributes section, enter the following in the Element

Enjoy Safari? Subscribe Today

Attributes text field:

onfocus=remember_oldsal(this.value); onchange=validate_sal(this.id,this.value);
[9672_03_01.txt]

5. Click on the Apply Changes button, and after that click again on it.
6. In the Page section, click on the Edit icon.
7. 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_OLDSALcopies the salary when
the user navigates to the salaryfield. The function VALIDATE_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
variable oldsalis copied to the salarycolumn. Otherwise, newly
entered salary is kept as is.
8. Click on the Apply Changes button.
9. 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.

PREV

3. Extending APEX

NEXT

Creating a tag clou

Recommended / Queue / Recent / Topics / Settings / Blog(http://blog.safaribooksonline.com) /

Support(http://msupport.safaribooksonline.com/?prod=flow) / Feedback / Sign Out
2014 Safari(http://www.safaribooksonline.com/).
Terms of Service / Privacy Policy