AJAX with ASP

ReportingAnalyst · Dec 18, 2006

Hi,

I am building a sample ASP page which pulls from the Northwind database where I display the category Beverage and on click of the "Beverage" link, I can pass the category id to the sql statement to display the products which fall under the "Beverage" category. Now I want to include AJAX to this so that I do not see the page re-load.

At the same time, when I click on the Beverage link, if it is expanded, then it should collapse, and it is collapsed, then it should expand.

Can I do this?

ASP part:

Code:

<ul id="menu">
		<li>
			<input type="radio" checked name="prodid" id="Catid<%=aCategory(0, iRows)%>" value="<%=aCategory(0, iRows)%>">
			<a href="Categories_dynamic.asp?ID=<%=aCategory(0, iRows)%>" class="a_style" onclick="showProducts(<%=aCategory(0, iRows)%>)"><%=aCategory(1, iRows)%></a>
			<ul id="UI_<%=aCategory(0, iRows)%>" >
			<%
			QS = Request.Querystring("ID")

			'Now pass the querystring to the following function.
			if QS = trim(aCategory(0, iRows)) then
				Call GetProducts (QS, Counter)
			end if
			%>
			</ul>
		</li>
	</ul>

My Javascript part is:

Code:

function showProducts(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var url="Categories_dynamic.asp"
url=url+"?q="+str
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")
{
//get the element ID of this UL tag which I would like to show for the above category. I would not like to use div tags because I have styled UL tags. How can I get the UL tag ID into this line 
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
}

//How to include this function in the above Javascript function
/*function s_Hide(el){
	objID = 'UI_'+el;
	obj = document.getElementById(objID).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}*/

ReportingAnalyst · Dec 18, 2006

I changed the function to this:

Code:

function showProducts(str)
{
alert("This function was called"); //works
alert(str);
objID = 'UI_'+str; //works - able to bring forward the UL id
alert(objID);

obj = document.getElementById(objID).style; [b]//here it is not working. it shows the products and then
//all of them dissapear even though I see them in the page source of the asp file on the browser.[/b]

(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';

xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var url="Categories_dynamic.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

}

Secondly I would like to add that my page is definitely re-loading itself. I thought AJAX was not meant to re-load ASP pages.

Any ideas how to show and hide the UL tags?

Thanks.

ReportingAnalyst · Dec 20, 2006

I am still not able to use AJAX to show th products for the Category "Beverage"...I use a simple Northwind database to figure how I can use the AJAX to show the products when I click on the Beverage link.

Same time if the menu is expanded, then clicking on the link would collapse it and vice-versa. Is it possible to do an AJAX call and a show hide same time?

Thanks.

My code is:

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
%>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

AJAX with ASP

ReportingAnalyst

MIS

ReportingAnalyst

MIS

ReportingAnalyst

MIS

Similar threads

Part and Inventory Search

Sponsor