Microsoft KB Archive/272069

= HOW TO: Use ASP to Generate DHTML-Enabled Tables in Front Page 2000 =

Article ID: 272069

Article Last Modified on 7/4/2007

-

APPLIES TO


 * Microsoft FrontPage 2000 Standard Edition
 * Microsoft Internet Information Server 4.0
 * Microsoft Internet Information Services 5.0

-



This article was previously published under Q272069



IN THIS TASK
SUMMARY
 * Defining DHTML ID Attributes
 * ASP Sample Explained
 * Creating the ASP Sample

REFERENCES



SUMMARY
Microsoft Active Server Pages (ASP) can be used to gather information from a database, and Dynamic HTML (DHTML) can be used to change information that is displayed on a Web page from the client. This article explains how to use these two technologies together. Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. back to the top

Defining DHTML ID Attributes
HTML tags on a Web page that have been given an ID attribute can be easily accessed through DHTML. When you work with static text, the ID can be inserted into an HTML tag manually, as in the following example: This is some sample text When you work with a Web page that is dynamically generated by ASP from a live database, however, the ID attributes should be generated dynamically as well. The ASP example in this article illustrates how to accomplish this.

back to the top

ASP Sample Explained
The ASP page sample is divided into three sections that are labeled with HTML comments. These sections are:
 * Section One: Stylesheet Classes - The stylesheet classes listed are used by the DHTML function to change the appearance of text that has been changed.
 * Section Two: DHTML JavaScript - This function detects whether a table cell was clicked, and, if so, it prompts for text to insert into the table cell that was clicked.
 * Section Three: HTML Table & ASP Code - This section of code first creates an HTML table that calls the DHTML function when it is clicked, and then uses ASP code to open the sample database's &quot;Customers&quot; table to loop through all the records and display them in the HTML table as individual rows and columns. Each column is given a unique ID by the ASP code that can be used with the DHTML function.

NOTE: This example demonstrates how to use ASP to create a table with dynamically created IDs for DHTML. Changing the values in the table cells does not update the actual database.

back to the top

Creating the ASP Sample
Follow these steps to create the ASP sample page:  Open your root web in FrontPage 2000 on a Microsoft Internet Information Services Web server. Open a new page in FrontPage. If the sample database is not already in the &quot;/fpdb/fpnwind.mdb&quot; folder, insert the Northwind sample database into your web by following these steps:  On the File menu, click Insert, click Database, and then click Results. Click to select Use a sample database connection (Northwind), and then click Next. When the next page of the wizard appears, click Cancel.</li></ol> </li> Switch to HTML view.</li>  Remove all the existing HTML code, and insert the following ASP/HTML code: <% @ Language=&quot;VBScript&quot; %> <% Option Explicit %> ASP/DHTML Test

.normal { color: black; background-color:white } .edited { color: white; background-color:blue }

<script language=&quot;JavaScript&quot;>

</li> Save the page as ASP_DHTML_Test.asp.</li></ol>

When you browse this page in Microsoft Internet Explorer and click a table cell, you are prompted to enter a value to be inserted into the table cell that was clicked. In addition, the stylesheet class of the affected table cell is changed to reflect that it has been edited.

back to the top

<div class="references_section">