ReportingAnalyst
MIS
Hi,
Can you please let me know what I am doing wrong in the ASP and AJAX part because I do not seem to be calling the AJAX function properly...
What I would like to see is onload of the page, I see only the top level category "Beverage" which is a link. When I click on the "Beverage", then I can see the products that fall under the category "Beverage" using this AJAX function.
I am able to get the products right. But I am not calling the products through AJAX. That is where my trouble lies.
This is something one can try on their machines as well as this is related to the a commonly available database "Northwind"
Thanks.
Can you please let me know what I am doing wrong in the ASP and AJAX part because I do not seem to be calling the AJAX function properly...
What I would like to see is onload of the page, I see only the top level category "Beverage" which is a link. When I click on the "Beverage", then I can see the products that fall under the category "Beverage" using this AJAX function.
I am able to get the products right. But I am not calling the products through AJAX. That is where my trouble lies.
This is something one can try on their machines as well as this is related to the a commonly available database "Northwind"
Thanks.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<%
Dim conn
Set conn = Server.CreateObject("ADODB.Connection")
Conn.open "PROVIDER=SQLOLEDB;DATA SOURCE=ServerName;UID=dbo;PWD=password;DATABASE=Northwind "
'If Conn.State = 0 Then
' Response.Write "The ADO Connection is closed."
' Response.End
'End If
'If Conn.State = 1 Then
' Response.Write "The ADO Connection is open."
' Response.End
'End If
%>
<head>
<style type="text/css">
* {
border: 0;
padding: 0;
margin: 0;
}
#menu {
padding:0;
margin:0;
}
#menu li {
list-style-type:none;
}
#menu ul {
padding: 0;
margin: 6px;
list-style-type: none;
}
a.a_style:link {color:#0000ff; text-decoration:none;}
a.a_style:visited {color:#0000ff; text-decoration:none;}
a.a_style:hover {color:#ff0000; text-decoration:underline;}
a.a_style:hover {color:#ff0000; text-decoration:underline;}
</style>
<script type="text/javascript">
var xmlHttp
function showProducts(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="Categories_dynamic.asp"
url=url+"?ID="+str
alert(url);
//url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
objID = 'UI_'+el;
document.getElementById(objID).innerHTML=xmlHttp.responseText
//document.getElementById("content_products").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest) //Safari, Mozilla browers
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject) //IE browsers
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function s_Hide(el){
alert("Showing Element: "+el);
objID = 'UI_'+el;
alert(objID);
obj = document.getElementById(objID).style;
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>
<title>On Demand Building of tree with User OnClick</title>
</head>
<body>
<form name="Customers" id="Customers" action="">
<%
startTime = Now()
'get the Products using a function
Function GetProducts(CatID, Counter)
sql = "SELECT CategoryID, ProductName, ProductID FROM Products " & _
"where CategoryID = " & Request.QueryString("ID") & " " & _
"order by ProductName "
'Response.Write sql
'Response.End
Dim rs2
set rs2 = Server.CreateObject("ADODB.Recordset")
rs2.open sql, Conn
Dim aProducts
If not rs2.EOF then
aProducts = rs2.GetRows()
'Close Recordset to use the new array with the 2 columns data
rs2.Close()
set rs2 = Nothing
'Declare Constants for the above SQL columns for better readability
'Use these Constants instead of referring to the array numeric indexes
Const c_CatID = 0
Const c_ProductName = 1
Const c_ProductID = 2
'Ubound(MyArray,1) 'Returns the Number of Columns
'Ubound(MyArray,2) 'Returns the Number of Rows
Dim iRowLoop
For iRowLoop = 0 to UBound(aProducts, 2)
%>
<li>
<input type="radio" name="prodid" id="prodid<%=aProducts(c_ProductID,iRowLoop)%>" value="<%=aProducts(c_ProductID,iRowLoop)%>">
<%=aProducts(c_ProductName,iRowLoop)%>
<%
Counter = Counter + 1
Counter = Counter - 1
%>
</li>
<%
Next 'iRowLoop
End If 'rs2.EOF
End Function
%>
<%
Dim rs
Set rs = Server.CreateObject("ADODB.Recordset")
sSQL = "SELECT CategoryID, CategoryName FROM Categories WHERE CategoryID = 1"
rs.open sSQL, Conn
'Response.Write sSQL
Dim aCategory
If not rs.EOF Then
'Dump the recordset into the above array
aCategory = rs.getRows()
rs.Close
Set rs = Nothing
Dim iRows
For iRows = 0 to UBound(aCategory, 2)
CatID = aCategory(0, iRows)
%>
<ul id="menu">
<li>
<input type="radio" checked name="prodid" id="Catid<%=aCategory(0, iRows)%>" value="<%=aCategory(0, iRows)%>">
<a href="Categories_dynamic.asp" class="a_style" onclick="showProducts(<%=aCategory(0, iRows)%>);s_Hide(this);"><%=aCategory(1, iRows)%></a>
<ul id="UI_<%=aCategory(0, iRows)%>" style="display:none;">
<%
'QS = Request.Querystring("ID")
'Now pass the querystring to the following function.
if QS = trim(aCategory(0, iRows)) then
Call GetProducts (CatID, Counter)
end if
%>
</ul>
</li>
</ul>
<%
Next 'iRows
End If
%>
</form>
</body>
</html>
<%
Conn.Close
Set Conn = Nothing
%>
