Oracle APEX Cookbook（Second Edition）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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...

  1. In the Application Builder, go to the page based on the EMP table.
  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 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_OLDSAL copies the salary when the user navigates to the salary field. 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 oldsal is copied to the salary column. 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.

上一章目录下一章