Skip Headers
Oracle® HTML DB 2 Day Developer
Release 2.0

Part Number B16376-01
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Master Index
Master Index
Go to Feedback page
Feedback

Go to previous page
Previous
Go to next page
Next
View PDF

9 How to Incorporate JavaScript into an Application

Adding JavaScript to a Web applications is a great way to add features that mimic those found client/server applications without sacrificing all of the benefits of Web deployment. Oracle HTML DB 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 HTML DB validations instead of JavaScript.

This tutorial describes some usage scenarios for JavaScript and includes details about how to implement them in your application.

This section contains the following topics:

Understanding How to Incorporate JavaScript Functions

There are two primary places to include JavaScript functions:

Incorporating JavaScript in the HTML Header Attribute

One way to include JavaScript into your application is add it to the HTML Header attribute of the page. This is a good approach for functions that are specific to a page as well as a convenient way to test a function before you include it in the .js file.

You can add JavaScript functions to a page by entering the code into the HTML Header attribute on the Page Attributes page.

To add JavaScript code in the HTML Header attribute:

  1. Click the Application Builder icon on the Workspace home page.

  2. Select an application.

  3. Select a page.

  4. Click Edit Attributes.

  5. Scroll down HTML Header.

  6. Enter code into HTML Header and click Apply Changes.

For example, adding the following would test a function accessible from anywhere on the current page.

<script language="JavaScript1.1" type="text/javascript">
  function test(){
    alert('This is a test.');
  }
</script>

Including JavaScript in a .js File Referenced by the Page Template

In Oracle HTML DB 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <script src="#APP_IMAGES#custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#


See Also:

""Customizing Templates" in Oracle HTML DB User's Guide

About Referencing Items Using JavaScript

When you reference an item, the best approach is to reference by ID. If you view the HTML source of an Oracle HTML DB 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.

Knowing the item ID enables you to use the JavaScript function getElementById to get and set item attributes and values. The following example demonstrates how to reference an item by ID and display its value in an alert box.

<script language="JavaScript1.1" type="text/javascript">
  function firstName(){    
    alert('First Name is ' + document.getElementById('P1_FIRST_NAME').value );
  }
 // or a more generic version would be
  function displayValue(id){    
    alert('The Value is ' + document.getElementById(id).value );
  }
</script>
 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onChange="javascript:displayValue('P1_FIRST_NAME');"

Calling JavaScript from a Button

Calling a JavaScript from a button is a great way to confirm a request. Oracle HTML DB 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:

<script language="JavaScript1.1" type="text/javascript">
  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');
  }
</script>

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 delete using a process that conditionally executes based on the value of request.

Note that when you create the button you would need to select Action Redirect to URL without submitting page. Then, you would specify a URL target such as the following:

javascript:confirmDelete('Would you like to perform this delete action?');

Creating a Client Side JavaScript Validation

Client side validations give immediate feedback to users using a form. One very common JavaScript validation is field not null. For example, you can create a function in the HTML Header attribute of a page and then call that function from an item.

Creating this type of JavaScript validation involves the following steps:

Topics in this section include:

Create an Application on the EMP Table

To create a new application on the EMP table:

  1. Click the Application Builder icon on the Workspace home page.

  2. Click Create.

  3. For Method, select Create Application.

  4. For Name:

    1. In Name, enter a name that describes the application.

    2. For Create Application, select From scratch.

    3. Click Next.

  5. Add a blank page, containing a report:

    1. Under Select Page Type, select Report and Form.

    2. From Table or View, select EMP.

    3. Select Include Analysis Pages.

    4. Click Add Page.

  6. Configure Analysis Pages:

    1. For Summarize by Column, press CTRL and select the columns JOB, MGR, and DEPTNO and click Next.

    2. On Aggregate by Column, select SAL and COMM and click Next.

    3. For Chart Type, select Pie and click Next.

    4. Review your selections and click Add Analysis Pages.

      The new pages appears in the list at the top of the page.

    5. Click Next.

  7. For Tabs, select One Level of Tabs and click Next.

  8. For Shared Components, accept the default, No, and click Next.

  9. For Attributes, accept the defaults for Authentication Scheme, Language, and User Language Preferences Derived From and click Next.

  10. For User Interface, select a theme and click Next.

  11. Click Create.

To view the application:

  1. Click Run Application.

  2. When prompted for a user name and password:

    • For User Name, enter the name of your workspace

    • For Password, enter the password for your workspace

    The application contains the following pages:

    • a standard report

    • an insert form

    • an update form

    • a success form (indicates when a record is successfully inserted)

    • an analysis menu page

    • analysis reports

    • analysis charts

    • a login page

  3. Select Edit Application from the Developer Toolbar.

Add a Function to the HTML Header Attribute

To add a function to the HTML Header attribute on page 2:

  1. Navigate to the Page Definition for page 2, the Amp insert form.

  2. Under Regions, select EMP.

  3. Change Title to Insert Form and click Apply Changes.

  4. Click Edit Attributes.

    The Edit Page attributes page appears.

  5. Scroll down to HTML Header.

  6. In HTML Header, enter the following:

    <script language="JavaScript1.1" type="text/javascript">
      function notNull(object){    
        if(object.value=="")
       alert('This field must contain a value.');
      }
    </script>
    
    
  7. Click Apply Changes.

Edit an Item to Call the Function

The next step is to edit the P2_ENAME item and add code to the HTML Form Element Attributes attribute to call the function.

To edit the P2_ENAME item to call the function:

  1. Navigate to the Page Definition for page 2, Insert Form.

  2. Under Items, select P2_ENAME.

  3. Scroll down to Element.

  4. In HTML Form Element Attributes, enter the following:

    onBlur="javascript:notNull(this);"
    
    
  5. Click Apply Changes.

  6. Run the page. If you position the cursor in the Ename field and click Create, the following message appears:

    This field must contain a value.
    
    

Enabling and Disabling Form Elements

While Oracle HTML DB enables you to conditionally display a page item, it is important to note that a page must be submitted for any changes on the page to be evaluated. The following example demonstrates how to use JavaScript to disable a form element based on the value of another form element.

First, you write a function and place it in the HTML Header attribute of the page containing your update form. Second, you call the function from an item on the page. The following example demonstrates how to add a JavaScript function to prevent users from adding commissions to employees who are not in the Sales Department (deptno = 30).

Topics in this section include:

Add a Function the HTML Header Attribute

To add a function to the HTML Header attribute on page 2:

  1. Navigate to the Page Definition for page 2.

  2. On the Page Definition, click Edit Attributes.

    The Page Attributes appear.

  3. Scroll down to HTML Header.

  4. In HTML Header, enter the following:

    <script language="JavaScript1.1" type="text/javascript">
    
       // This function takes in:
       //   1. A string expression to evaluate.  For example:
       //      'document.getElementById(\'P2_DEPTNO\').value==\'0\'
       //      Notice the quotes are escaped using a "\"
       //   2. One or more arguments which are item ID's as strings.  For example:
        //      ...,'P2_ENAME','P2_SAL'...);
        //      Notice the ID's are the item names, NOT item labels
    
    function disFormItems(testString,item1,item2,item3,item4,item5,item6,item7,item8,item9,item10){
    
       if(theTest){
           for(var i=1;i<12;i++){
               if (arguments[i]){
                  disItem = document.getElementById(arguments[i]);
                   disItem.style.background = '#cccccc';
                   disItem.disabled = true;
                   }
               }
           }
       else{
           for(var i=1;i<12;i++){
               if (arguments[i]){
                   disItem = document.getElementById(arguments[i]);
                   disItem.disabled = false;
                   disItem.style.background = '#ffffff';
                   }
               }
       }
        }
    </script>
    
    
  5. Click Apply Changes.

Edit an Item to Call the Function

The next step is to edit the P2_DEPTNO item and add code to the HTML Form Element Attributes attribute to call the function.

To edit the P2_DEPTNO item to call the function:

  1. Navigate to the Page Definition for page 2.

  2. Under Items, select P2_DEPTNO.

  3. Scroll down to Element.

  4. In HTML Form Element Attributes, enter the following:

    onChange="javascript:disFormItems('document.getElementById(\'P2_DEPTNO\').value!=\'30\'','P2_COMM');"
    
    
  5. Click Apply Changes.

Change P2_DEPTNO to a Select List

To change the P2_DEPTNO to display as a select list:

  1. Navigate to the Page Definition for page 2.

  2. Under Items, select P2_DEPTNO.

  3. Under Display As, select Select List.

  4. Scroll down to List of Values.

  5. Under List of Values:

    1. From Display Null, select No.

    2. In List of Values definition, enter:

      SELECT dname, deptno FROM dept
      
      
  6. Click Apply Changes.

Create a Call to disFormItems from the Region Footer

Finally, you need to create a call to the disFormItems function after the page is rendered to disable P2_COMM if the selected employee is not a SALES representative. A good place to make this call would be from the Region Footer of the region which contains the items.

To disable P2_COMM when the page is first loaded:

  1. Navigate to the Page Definition for page 2.

  2. Under Regions, select Insert Form.

  3. Scroll down to Header and Footer.

  4. In Region Footer, enter the following:

    <script language="JavaScript1.1" type="text/javascript">
      // This code calls the function when the page loads, thus setting the items state correctly.
      disFormItems('document.getElementById(\'P2_DEPTNO\').value!=\'30\'','P2_COMM');
    </script>
    
    
  5. Click Apply Changes.

  6. Run the page by clicking the Run Page icon.

Figure Figure 9-1 demonstrates the completed form.

Figure 9-1 Completed Form

Description of js_sel.gif follows
Description of the illustration js_sel.gif

Changing the Value of Form Elements

In the following example, there are four text boxes in a region. The fourth text box contains the sum of the other three. To calculate this sum you will add a JavaScript function to the HTML Header attribute and then call that function from the first three items

To call the function from the first three items:

  1. Navigate to the appropriate Page Definition.

  2. On the Page Definition, click Edit Attributes.

    The Page Attributes appear.

  3. In HTML Header, enter the following:

    <script language="JavaScript1.1" type="text/javascript">
      function sumItems(){
        function getVal(item){
       if(document.getElementById(item).value != "")
         return parseFloat(document.getElementById(item).value);
       else
         return 0;
        }
        document.getElementById('P1_TOTAL').value = 
      getVal('P1_ONE') + getVal('P1_TWO') + getVal('P1_THREE');
      }
    </script>
    
    
  4. Click Apply Changes.

To call the function from all three items:

  1. Navigate to the appropriate Page Definition.

  2. For each item:

    1. Select the item name.

    2. Scroll down to Element.

    3. In HTML Form Element Attributes, enter:

      onChange="javascript:sumItems();"
      
      
    4. Click Apply Changes.