Altova Mailing List Archives>Archive Index >microsoft.public.xml Archive Home >Recent entries >Thread Prev - Re: Newbie >Thread Next - Re: Newbie Re: NewbieTo: NULL Date: 7/14/2007 10:34:00 PM
"John Peach" <john.peach@z...> wrote in message
news:46952b32$0$15862$fa0fcedb@n......
> >>>
> >>> "John Peach" <john.peach@z...> wrote in message
> >>> news:468e927d$0$27848$db0fefd9@n......
> >>> > Can any one provide examples or recommend a good tutorial:
> >>> >
> >>> > I want to bind comboboxes using XML written from a server side
script
> >>> > (ASP). The comboboxes will will be updated dynamically based on the
> >>> > selection of the previous box.
> >>> >
> >>> > Can anyone give any assistance
> >>> >
> >>>
>
> I'm using legacy ASP, as net.framwork is not installed on the IIS. from
what
> I can see the best way of acheive what i want is to use span to place
combo
> boxes then use xmlhttp to return a combobox into innerhtml of the calling
> form
>
>
Here is a basic tutorial. (I really must get me some Blog or Web space).
We're going to build a very basic car chooser the has just two drop downs.
A list of Makes and a list of Models. The Models dropdown will not be
populated until the Make is specified. If the Make is changed then the
Model value is reset and a new set of options loaded.
Let's start with some basic infrastucture:-
'Choosecar.asp
<%
Const connStr = "Provider=SQLOLEDB.1;Integrated Security=SSPI;Initial
Catalog=Test;Data Source=.;"
Dim mcon: Set mcon = Server.CreateObject("ADODB.Connection")
mcon.open connStr
Select Case LCase(Request.QueryString("function"))
Case "getmodels"
Case Else
%>
<!-- Usual HTML content here -->
<%
End Select
mcon.close
'VBScript functions here
%>
I've got a Test database in the default SQL server instance and I've turned
off anonymous access. Of course you can change the connection string to
meet your own requirements as necessary.
In order to avoid having multiple ASP pages to support a single task the
Choosecar.asp can take a function query string value which allows it to
encapsulate all functions needed.
In the DB I have two tables CarMake and CarModel:-
CarMake:
MakeID , Name
1, Ford
2, Toyota
2, Peugeot
CarModel:
ModelID, Name, ManufID
1, Focus, 1
2, Galaxy, 1
3, Model T, 2
4, Avensis, 2
5, Esitma, 2
6, 106, 3
7, 206, 3
8, 305, 3
Now add the following code to the VBScript functions section of the page:-
Function RecordSetToSelect(rrst, rsRoot, rsNullText)
Dim oXML : Set oXML = Server.CreateObject("MSXML2.DOMDocument.3.0")
oXML.loadXML rsRoot
Dim oSelect : Set oSelect = oXML.documentElement
If Not IsNull(rsNullText) Then
AddElem oSelect, "option", rsNullText
End If
Do Until rrst.EOF
AddElem(oSelect, "option",
rrst("DisplayText").Value).SetAttribute("value", rrst("Value").Value)
rrst.MoveNext
Loop
Set RecordSetToSelect = oXML
End Function
Function AddElem(roParent, rsName, rvntValue)
Set AddElem = roParent.ownerDocument.createElement(rsName)
roParent.appendChild AddElem
If Not IsNull(rvntValue) AddElem.Text = rvntValue
End Function
The RecordSetToSelect takes a recordset and generates the HTML for a Select
element. The RecordSetToSelect function requires a recordset that contains
a "value" field and a "DisplayText" field which are to be built into a HTML
SELECT element. It uses an XML DOM to build the set of elements and the DOM
is what ultimately is returned.
Now append this procedure to the VBScript functions section:-
Sub WriteMakeSelect()
Dim oXML
Dim sql: sql = "SELECT MakeID [value], [Name] [DisplayText] FROM CarMake"
Dim rst: Set rst = Server.CreateObject("ADODB.Recordset")
rst.Open sql, mcon
Set oXML = RecordsetToSelect(rst, "<select name=""make""
onchange=""cboMake_onchange.call(this)"" />", "-- Make --")
rst.Close
Response.Write oXML.xml
End Sub
WriteMakeSelect uses the RecordsetToSelect function to build the Make select
element and will write to the response. Note the aliasing in the SQL SELECT
to make the query conform to the RecordsetToSelect requirements. Note also
the onchange event will be wired up so that the models select can be
built/rebuilt when the user chooses/changes the make.
Now in the main html content that follows the Case Else in the
CarChooser.asp would look like:-
<html>
<head>
<title>Car Chooser</title>
<script type="text/javascript">
// Client-side javascript here
</script>
</head>
<body>
<form name="frmCar" id="frmCar" >
<div><%WriteMakeSelect%></div>
<div id="divModel">
<select name="model" disabled="disabled">
<option>-- Model --</option>
</select>
</div>
</form>
</body>
</html>
You'll notice we've disabled the model Select element since without choosing
a make we don't know what models are yet. The model select is held in a div
which we've given an ID so that Javascript code can replace it's contents.
So no we will add the javascript to fetch the models once the make is known.
Add the following code as the client side javascript:-
function cboMake_onchange()
{
var div = document.getElementById("divModel")
if (this.value)
{
var sHTML = getHTML("choosecar.asp?function=getmodels&makeID=" +
this.value)
if (sHTML) div.innerHTML = sHTML
}
else
{
div.innerHTML = '<select name="model" disabled="disabled"><option>--
Model --</option></select>'
}
}
function getHTML(sURL)
{
var oXMLHttp
if (window.XMLHttpRequest)
oXMLHttp = new XMLHttpRequest()
else
oXMLHttp = new ActiveXObject("MSXML2.XMLHttp.3.0")
oXMLHttp.open("GET", sURL, false)
oXMLHttp.send(null)
if (oXMLHttp.status == 200) return oXMLHttp.responseText
}
The getHTML function will take a given URL and return the text response from
requesting it.
Note that the URL calls back to CarChooser but with a function querystring
value of getmodels. Hence the code the "getmodels" case of our original
structure will execute. All we want this to do is send only the HTML for a
Select element with the relevant models in it. The code above will the use
that HTML to replace the content of the divModel element.
What we want then is a function that can fetch these models and return them
in the form of a HTML Select. Add the following function the VBScript
functions section of the page.
Function GetModels(rlMakeID)
Dim sql
Dim cmd: Set cmd = Server.CreateObject("ADODB.Command")
Dim rst: Set rst = Server.CreateObject("ADODB.Recordset")
sql = "SELECT ModelID [value], [Name] [DisplayText]" & _
"FROM CarModel WHERE MakeID = ?"
Set cmd.ActiveConnection = mcon
cmd.CommandType = 1 ' adCmdText
cmd.CommandText = sql
cmd.Parameters.Append cmd.CreateParameter("@MakeID", 3,,,rlMakeID)
rst.open cmd
Set GetModels = RecordsetToSelect(rst, "<select name=""model"" />", "--
Model --")
rst.close
End Function
%>
Note the use of a command object. Do not dynamic build SQL strings to
execute since it leaves your code open to SQL injection attacks. This
function also uses the RecordsetToSelect function to return an XML DOM
containing SELECT html.
Now we can fill in the "getmodels" case in our infrastructure outlined at
the start:-
Response.CharSet = "UTF-8"
GetModels(CLng(Request.QueryString("makeID"))).Save Response
Hope you find this useful.
--
Anthony Jones - MVP ASP/ASP.NET
| ||||||
| Company | Legal | Press | Partners | Careers | Sitemap | Contact Us | Altova Blog | Mobile | Full Site | |||
|
