How Do I Bind a Database to a WebFX Combo Box Control?
Prerequisites
Before you start, make sure you download the WebFX Combobox first. Next, unpack the archive and move the files ComboBox.css and ComboBox.js to a folder in your Web site. Next, create a new ASP file called Combobox.asp. You can choose any location for the files you want, but this snippet assumes that all three files are located in the same folder.
You'll also need a database with at least one table that contains the data that you want to add to the drop-down. In this code example, I am using a table called Countries. Each country has an ID (its ISO code) and a Description. The ID is used as the value attribute for each option, while the Description is used as the visible part in the drop-down control. The article assumes that the database is placed in the same folder as well, so be sure to change the path that is passed to Server.MapPath if you decide to move your database.
I am using a list of countries just for demonstration purposes. Since the list of countries isn't likely to change very often, it's probably better to use a static JavaScript file with the code for the countries already aded. Generating the entire JavaScript code from the database everytime the page loads may not be a wise idea in a real-life application, as it causes a lot of performance overhead. For this example however, the country list is just perfect, as it provides enough sample data to test out the functionality of the control.
The Code
The following code demonstrates how to bind the smart Combo Box to a recordset. Please note that I am not responsible or taking credit for the Combo Box control. This article just demonstrates how to use the Combo Box in combinations with a database. Contact WebFX for more information about the Combo Box control.
Simply copy the text below and paste it in the document ComboBox.asp.
<%@ Language=VBScript %> <% Option Explicit %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ComboBox Demo</title> <script src="ComboBox.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> dm=new ComboBox("dm") dm.add( <% ' Create Connection object, connection string etc Dim MyConnection Dim MyConnectionString Dim MySQLStatement Dim MyRecordset MyConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" & _ "Data Source=" & Server.MapPath("Website.mdb") & _ ";User Id=admin;Password=" ' SQL Statement will return a recordset with an ID ' (the ISO code for the country) and the name / description of the Country MySQLStatement = "SELECT Country.ID, Country.Description " & _ "FROM Country ORDER BY Country.Description" Set MyConnection = Server.CreateObject("ADODB.Connection") MyConnection.Open MyConnectionString ' Execute the SQL statement Set MyRecordset = MyConnection.Execute(MySQLStatement) If Not MyRecordset.EOF Then Do While Not MyRecordset.EOF ' For each record in the recordset, construct a new ComboBoxItem. ' ComboBoxItem is defined in the file ComboBox.js Response.Write(vbTab & "new ComboBoxItem('" & _ MyRecordset.Fields("Description").Value & "', '" & _ MyRecordset.Fields("ID").Value & "')") MyRecordset.MoveNext() ' Are there more items? If so, we need to add a comma If Not MyRecordset.EOF Then Response.Write("," & vbCrLf) End If Loop End If ' Clean Up MyRecordset.Close() Set MyRecordset = Nothing MyConnection.Close() Set MyConnection = Nothing %> ) </script> </body> </html>
Open the page in your browser, click the Combo Box and then type in Net. As soon as you start typing letters, you'll see the list of countries being limited to those starting with the letters you have typed. Once you typed Net, the list will look like this:
Figure 1: The Combobox in action
Demo code
You can see the full code of the example here.
Download Files
Source Code for this Article(The code download just contains the database and the .asp file. For the code for the ComboxBox, please check out the WebFX site.
Where to Next?
Wonder where to go next? You can post a comment on this article.
Links in this Document
Doc ID | 302 |
Full URL | https://imar.spaanjaars.com/302/how-do-i-bind-a-database-to-a-webfx-combo-box-control |
Short cut | https://imar.spaanjaars.com/302/ |
Written by | Imar Spaanjaars |
Date Posted | 06/05/2004 14:22 |
Date Last Updated | 11/02/2020 12:15 |
Date Last Reviewed | 06/10/2006 15:39 |
Listened to when writing | Inertia Creeps by Massive Attack (Track 4 from the album: Mezzanine) |
Comments
Talk Back! Comment on Imar.Spaanjaars.Com
I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.
When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.
If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.