官术网_书友最值得收藏!


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.

主站蜘蛛池模板: 大悟县| 永康市| 伊金霍洛旗| 黄山市| 会宁县| 金湖县| 雅江县| 大港区| 讷河市| 响水县| 依安县| 任丘市| 阿克陶县| 乐清市| 道孚县| 乌恰县| 祁阳县| 共和县| 兰州市| 长兴县| 万载县| 白河县| 泰顺县| 建德市| 吴江市| 综艺| 卫辉市| 剑阁县| 恭城| 汝南县| 新密市| 方山县| 旬阳县| 高青县| 思南县| 莱西市| 灯塔市| 扎兰屯市| 南岸区| 澄江县| 岳池县|