Question

Please can you suggest me an example in classic asp and ajax to make dependent combo?

Answer 1

Long before the concept of AJAX was formalised, I was using a technique called XML Data Islands to achieve this kind of functionality. Obviously, there are a number of AJAX frameworks and scripts that can achieve similar result, but this is just the tried-and-tested technique that I have used for years in my legacy applications.

I can’t quickly find any suitable articles, so I’ve dug up some of my old code. Basically, when you set the value of the parent control, you run some javascript that sends a request to a separate ASP page. This page queries the DB to get determine the data that will be used to populate the child control.

This second page returns the results as XML, which is stored and manipulated in an XML Data Island in your primary page. The calling javascript then parses the returned XML and populates the child control.

First we have the javascript calls from the primary control:

<tr>
                    <td>Customer:</td>
                    <td>
                        <select id="CustomerID" NAME="CustomerID" 
                            onfocus="javascript:populateCombo(fProcess.CustomerID.value)" 
                            onChange="javascript:populateCombo(fProcess.CustomerID.value)"  
                            onkeypress="javascript:populateCombo(fProcess.CustomerID.value);">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Depot:</td>
                    <td>
                        <select name="depot" id="depot" size="1"  alt="Depot">
                            <option value="" selected >&lt;Select Depot&gt;</option>
                        </select>
                    </td>
                </tr>

Then we have the javascript which makes the call to the second page (which retrieves the data from the DB):

// Fill combo with XML data
function populateCombo(par) {
    var currNode;

    XMLID.async = false;

    // Change Data Island source
    strQuery = "Select LocationID, LocationName from Locations where CustomerID='" + par + "' and Active = 1 Order By LocationName";
    XMLID.SRC="/fxdb/common/xmlQuery.asp?strQuery=" + strQuery;

    // Get all "names" from XML data
    objNodeList = XMLID.getElementsByTagName("LocationName");
    objNodeListID= XMLID.getElementsByTagName("LocationID");


    // Fill combo with names
    for (var i=0; i < objNodeList.length; i++) {
        fProcess.depot.options[i]=new Option(objNodeList.item(i).text,objNodeListID.item(i).text);
    }

    // Delete extra entries
    while ( objNodeList.length < fProcess.depot.options.length) {
        fProcess.depot.options[(fProcess.depot.options.length - 1)] = null;
    } 

} 

And finally, the page that queries the DB itself.

<%@ Language="VBScript" %>
<%
'  Declare all variables.
Option Explicit
Dim strSql,objRS,objField
Dim sConn, oConn
Dim strName, strValue


' Buffer and output as XML.
Response.Buffer = True
Response.ContentType = "text/xml"

' Start our XML document.
Response.Write "<?xml version=""1.0""?>" & vbCrLf

' Set SQL and database connection string.

set oConn=server.createobject("adodb.connection") 
sConn=Application("Connection")
oConn.Open sConn
strSQL = Request.QueryString("strQuery")

set objRS=oConn.execute(strSQL)

' Output start of data.
Response.Write "<database>" & vbCrLf

' Loop through the data records.
While Not objRS.EOF
    ' Output start of record.
    Response.Write "<record>" & vbCrLf
    ' Loop through the fields in each record.
    For Each objField in objRS.Fields
        strName  = objField.Name
        strValue = objField.Value
        If Len(strName)  > 0 Then strName = Server.HTMLEncode(strName)
        If Len(strValue) > 0 Then strValue = Server.HTMLEncode(strValue)
        Response.Write "<" & strName & ">" & vbCrLf
        Response.Write strValue & vbCrLf 
        Response.Write "</" & strName & ">" & vbCrLf
    Next
    ' Move to next city in database.
    Response.Write "</record>" & vbCrLf
    objRS.MoveNext
Wend

' Output end of data.
Response.Write "</database>" & vbCrLf
%> 

Edit: Oops! I forgot the all-important XML Data Island itself – add this after your Body tag.

<!-- Data Island-->
<XML ID="XMLID"></XML>