Ajax example: Database Interaction (Silent Data Update) and Tabbed View

Description

This example demonstrates how to retrieve information from the database and update it without refreshing the page. Tabs are used for viewing and editing information.

Usage

  1. Select an employee from the list. Note how the employee information is displayed without the page being refreshed.
  2. Click the Edit tab, modify information and click "Save". The data will be saved in the background and the employee list and information will be updated on the page.

Steps to recreate

  1. Add the Update Panel component to the page.
  2. Create an HTML table with three columns within the Update Panel.
  3. In the left column of the table use the Grid Builder to create a grid based on the officers table in the in the InternetDB database. Include officer_name column in the second step of the builder.
  4. To make the officer_name field "clickable", change the Label control to a Link control. Then switch to the Data tab of the Properties window and set the current page as the value of the new link's Href Source property. While editing the Href Source property also add a Link Parameter with the following values: Data Source Type = DataSource Column, Parameter Source = officer_id and Parameter name = officer_id.
  5. In the bottom row of the Grid, create "Add New" Link and set its Href Source property to the current page, then add officer_id into the Remove Parameters property.
  6. In the right cell of the HTML table, use the TabbedView and TabbedTab options in the "Forms" tab of the Toolbox to create Yahoo Tabbed View with two tabs.
  7. On both tabs, use the Record Builder to create record forms based on the officers table with the following three fields: officer_name, officer_position and officer_email.
  8. In the first tab, convert the officer_name, officer_position and officer_email TextBox controls to Labels and remove all the buttons from the form.
  9. Make cosmetic changes as needed, by modifying the text, tab and button captions within the HTML.

Database Tables used

Database: Internet

Tables: officers