Adding JavaScript to a Web application is a great way to add features that mimic those found in client/server applications without sacrificing all the benefits of Web deployment. Oracle Application Express includes multiple built-in interfaces especially designed for adding JavaScript.
Remember that JavaScript is not appropriate for data intensive validations. For example, to verify that a name is contained within a large database table, you would need to pull down every record to the client, creating a huge HTML document. In general, complex operations are much better suited for server-side Application Express validations instead of JavaScript.
See Also:
"Text with JavaScript Escaped Single Quotes" for information about referencing a shortcut inside of a JavaScript literal string, "Understanding Validations", and "Using JavaScript Code in a Plug-In"When you reference an item, the best approach is to reference by ID. If you view the HTML source of an Oracle Application Express page in a Web browser, you would notice that all items have an id attribute. This id corresponds to the name of the item, not the item label. For example, if you create an item with the name P1_FIRST_NAME and a label of First Name, the ID will be P1_FIRST_NAME.
You can get and set item attributes and values using the JavaScript functions $v('P1_FIRST_NAME') and $s('P1_FIRST_NAME', 'Joe');. Consider the following example:
function showFirstName(){
alert('First Name is ' +$v('P1_FIRST_NAME'))
};
function setFirstName(pFirstName){
$s('P1_FIRST_NAME', pFirstName);
};
These functions can be called by other JavaScript functions or with the Execute JavaScript code dynamic action.
See Also:
"APEX_JAVASCRIPT" in Oracle Application Express API ReferenceYou can include JavaScript into your application by adding it to the JavaScript attribute of the page. This is a good 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.
In the following example, adding the code would make the test function accessible from anywhere on the current page.
To add JavaScript code to the JavaScript attribute:
Navigate to the Page Definition. See "Accessing the Page Definition".
To access the Edit Page:
Tree view - Under Page Rendering, double-click the page title at the top of the tree.
Component view- Under Page, click the Edit icon.
Scroll down to JavaScript.
Enter code into the following:
Function and Global Variable Declaration - Enter JavaScript code (for example, functions or global variable declarations) for code to be used on this page. If the code is used on multiple pages, consider putting it into an external JavaScript file to avoid duplication.
Code you enter here replaces the #JAVASCRIPT_CODE# substitution string in the page template.
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(){
alert('This is a test.');
}
Apply Changes.
To call a .js file from the HTML Header attribute:
Navigate to the Page Definition. See "Accessing the Page Definition".
To access the Edit Page:
Tree view - Under Page Rendering, double-click the page title at the top of the tree.
Component view- Under Page, click the Edit icon.
Scroll down to HTML Header and Body Attribute.
In HTML Header, call the JavaScript file using the following syntax:
<script src="/my_images/custom.js" type="text/javascript"></script>
Apply Changes.
In Oracle Application Express, you can reference a .js file in the page template. This approach makes all the JavaScript in that file accessible to the application. This is the most efficient approach since a .js file loads on the first page view of your application and is then cached by the browser.
The following demonstrates how to include a .js file in the header section of a page template. Note the line script src= that appears in bold.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>#TITLE#</title>
#HEAD#
<script src="/my_images/custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#
See Also:
"Page Templates"Calling JavaScript from a button is a great way to confirm a request. Oracle Application Express uses this technique for the delete operation of most objects. For example, when you delete a button, a JavaScript message appears asking you to confirm your request. Consider the following example:
function deleteConfirm(msg)
{
var confDel = msg;
if(confDel ==null)
confDel= confirm("Would you like to perform this delete action?");
else
confDel= confirm(msg);
if (confDel== true)
doSubmit('Delete');
}
This example creates a function to confirm a delete action and then calls that function from a button. Note that the function optionally submits the page and sets the value of the internal variable :REQUEST to Delete, thus performing the deletion using a process that conditionally executes based on the value of the request.
Note that when you create the button, you would need to select Redirect to URL. Then, you would specify a URL target such as the following:
javascript:confirmDelete('Would you like to perform this delete action?');
See Also:
"Creating a Button Using a Wizard"Oracle recommends using dynamic actions as the preferred way of executing JavaScript code. Consider the following example:
Create a button with action of Defined by Dynamic Action. See "Creating a Button Using a Wizard".
Create a dynamic action and using the action type Execute JavaScript Code to execute the previous code, for example:
if (confirm("Would you like to perform this delete action?")) {
apex.submit('Delete');
}
Note that this example uses JavaScript, but you could also easily implement this example without having to use JavaScript. Instead, you can use the declarative actions Confirm and Submit Page which are also translatable. To learn more, see "Implementing Dynamic Actions".
You can also execute JavaScript code by creating a dynamic action. JavaScript code can be executed with the types Execute JavaScript and Set Value. You can also use JavaScript code for the condition of a dynamic action by setting the condition type to JavaScript Expression. To learn more, see "Implementing Dynamic Actions".