Ajax example: Database Interaction (Silent Data Update) and Tabbed View
This example demonstrates how to retrieve information from the database and
update it without refreshing the page. Tabs are used for viewing and editing
Select an employee from the list. Note how the employee information is
displayed without the page being refreshed.
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
Add the Update Panel component to the page.
Create an HTML table with three columns within the Update Panel.
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
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.
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.
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.
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.
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.
Make cosmetic changes as needed, by modifying the text, tab and button
captions within the HTML.