Using AJAX into your Application Purpose This tutorial shows you how to implement some AJAX examples into your application. Time to Complete Approximately 30 minutes Topics This tutorial covers the following topics: Overview Prerequisites Creating a New Page and Region Adding a Dependent Select List Setting Multiple Items Based on Another Item Adding Rollover Item Help Summary Viewing Screenshots Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.) Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it. Overview AJAX (Asynchronous JavaScript and XML) uses JavaScript to communicate with the XMLHttpRequest object that communicates with an APEX On Demand process. It can send and receive information in a variety of formats, including XML, HTML, JSON and text content. Because AJAX is “asynchronous”, you can use the content as a data source or you can update portions of the page itself. JavaScript and AJAX are used throughout the Oracle Application Express product itself. One example of where JavaScript is used is when deleting an object. When you receive the alert to confirm your deletion, this action uses JavaScript. An example of where AJAX is used is when changing the pagination on the Application Builder page. When you change the number of rows to show and then click Go. This action uses AJAX to render the page without submitting the page. In this tutorial, you use AJAX to incorporate some new capabilities into your application. Back to Topic List Prerequisites Before you perform this tutorial, you should: 1. Install Oracle Database 11g. 2. Install and configure Oracle Application Express. See documentation on OTN. 3. Download and unzip the into your working directory. apexweb20.zip 4. Import the Project Tasks Application in Application Builder using the file located in the projtasks_app.sql directory where you unzipped the file in the previous step. Back to Topic List Creating a New Page and Region In this tutorial, you create a page and region which will be used to build the AJAX Examples. Perform the following steps: 1. Enter the following URL to log in to Oracle Application Express (change the <hostname> to localhost, your specific hostname or apex.oracle.com). http://<hostname>:8080/apex 2. To log in to Oracle Application Express, enter the following details, and click Login. Workspace: <your workspace name> Username: <your username> Password: <your password> 3. On the Workspace home page, click Application Builder. 4. Select Project Tasks Application. 5. Create a new blank page. Click Create Page. 6. Select Blank Page for page type and click Next. 7. Click Next. 8. Enter AJAX Examples for Name and click Next. 9. Click Next. 10. Click Finish. 11. Your page has been created successfully. Click Edit Page. 12. Now, you can create an HTML Region. Under Regions, select the Create icon. 13. Select HTML and click Next. 14. Select HTML again and click Next. 15. Enter AJAX Examples for the Title and click Create. Your page and region were created successfully. Back to Topic List Adding a Dependent Select List In this section, you create two select lists to show a list of departments and then the employees in that department. Perform the following tasks: Create Select List Items Create an On Demand Process Invoke the On Demand Process When Department Name is Selected Back to Topic List Create Select List Items In this section, you create Select List items for DEPARTMENT_NAME and EMPLOYEE_NAME. Perform the following steps: 1. From the Page Definition page, under Items, select the Create icon. 2. Select Select List and click Next.
Description: