467,925 Members | 2,033 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,925 developers. It's quick & easy.

Help with AJAX: combine two pages into one

Hi,

I am still not able to get this working in a simple page. Please help me. I am badly stuck....

I am trying to view the contents of the Beverage Category. I have built it like a hierarchy in the form of styled <UL> tags.

Please assist me in combining the 2 pages into one page. I would extremely grateful.

My code is:

Categories_Dynamic.asp
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <!--#INCLUDE Virtual="/Scripts/Padmaja/Testing2/DB_Northwind.asp"-->
  4. <head>
  5. <style type="text/css">
  6. * {
  7.    border: 0;
  8.    padding: 0;
  9.    margin: 0;
  10. }
  11.  
  12. #menu {
  13.   padding:0;
  14.   margin:0;
  15.   }
  16. #menu li {
  17.   list-style-type:none;
  18.   }
  19.  
  20. #menu ul {
  21. padding: 0;
  22. margin: 6px;
  23. list-style-type: none;
  24. }
  25.  
  26. a.a_style:link {color:#0000ff; text-decoration:none;}
  27. a.a_style:visited {color:#0000ff; text-decoration:none;}
  28. a.a_style:hover {color:#ff0000; text-decoration:underline;}
  29. a.a_style:hover {color:#ff0000; text-decoration:underline;}
  30.  
  31. </style>
  32.  
  33. <script type="text/javascript">
  34.  
  35. var xmlHttp
  36.  
  37. function showProducts(str)
  38. {
  39. xmlHttp=GetXmlHttpObject()
  40. if (xmlHttp==null)
  41. {
  42. alert ("Browser does not support HTTP Request")
  43. return
  44. }
  45.  
  46. var url="getProducts.asp"
  47. url=url+"?ID="+str
  48. //alert(url);
  49. //url=url+"&sid="+Math.random()
  50. xmlHttp.onreadystatechange=stateChanged1
  51. xmlHttp.open("GET",url,true)
  52. xmlHttp.send(null)
  53. }
  54.  
  55. function stateChanged1()
  56. {
  57.     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  58.     {
  59.         //objID = 'UI_'+el;
  60.         //document.getElementById(objID).innerHTML=xmlHttp.responseText
  61.         document.getElementById("content_products").innerHTML=xmlHttp.responseText
  62.     }
  63. }
  64.  
  65. function GetXmlHttpObject()
  66. {
  67. var objXMLHttp=null
  68. if (window.XMLHttpRequest) //Safari, Mozilla browers
  69. {
  70.     objXMLHttp=new XMLHttpRequest()
  71. }
  72. else if (window.ActiveXObject) //IE browsers
  73. {
  74.     objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  75. }
  76. return objXMLHttp
  77. }
  78.  
  79. function s_Hide(el){
  80.     //alert("Showing Element: "+el);
  81.     objID = 'UI_'+el;
  82.     //alert(objID);
  83.     obj = document.getElementById(objID).style;
  84.     (obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
  85. }
  86.  
  87. </script>
  88.  
  89. <title>On Demand Building of tree with User OnClick</title>
  90. </head>
  91.  
  92. <body>
  93.  
  94. <form name="Customers" id="Customers" action="">
  95.  
  96. <%
  97.  
  98. Dim rs
  99. Set rs = Server.CreateObject("ADODB.Recordset")
  100. sSQL = "SELECT CategoryID, CategoryName FROM Categories WHERE CategoryID = 2"
  101.  
  102. rs.open sSQL, Conn
  103.  
  104. Dim aCategory
  105.  
  106. If not rs.EOF Then
  107.     'Dump the recordset into the above array
  108.     aCategory = rs.getRows()
  109.  
  110.     rs.Close
  111.     Set rs = Nothing
  112.  
  113.     Dim iRows
  114.  
  115.     For iRows = 0 to UBound(aCategory, 2)
  116.     CatID = aCategory(0, iRows)
  117.     %>
  118.     <ul id="menu">
  119.         <li>
  120.             <input type="radio" checked name="prodid" id="Catid<%=aCategory(0, iRows)%>" value="<%=aCategory(0, iRows)%>">
  121.             <a href="#" class="a_style" onclick="showProducts(<%=aCategory(0, iRows)%>);s_Hide('<%=aCategory(0, iRows)%>'); return false;"><%=aCategory(1, iRows)%></a>
  122.             <ul id="UI_<%=aCategory(0, iRows)%>">
  123.             <%
  124.             'QS = Request.Querystring("ID")
  125.             'Now pass the querystring to the following function.
  126.             'if QS = trim(aCategory(0, iRows)) then
  127.                 'Call GetProducts (CatID, Counter)
  128.             'end if
  129.             %>
  130.             <div id="content_products">
  131.             </div>
  132.             </ul>
  133.         </li>
  134.     </ul>
  135.     <%
  136.     Next 'iRows
  137. End If
  138. %>
  139. </form>
  140. </body>
  141. </html>
  142. <%
  143. Conn.Close
  144. Set Conn = Nothing
  145. %>
  146.  
getProducts.asp

Expand|Select|Wrap|Line Numbers
  1. <%
  2. ProdID = Request.Querystring("ID")
  3. 'Response.Write ProdID
  4. Call GetProducts (ProdID, Counter)
  5.  
  6.  
  7. startTime = Now()
  8.  
  9. 'get the Products using a function
  10.  
  11. Function GetProducts(ProdID, Counter)
  12.  
  13.         sql = "SELECT CategoryID, ProductName, ProductID FROM Products " & _
  14.               "where CategoryID = " & ProdID & " " & _
  15.               "order by ProductName "
  16.  
  17.         'Response.Write sql
  18.         'Response.End
  19.  
  20.         Dim rs2
  21.         set rs2 = Server.CreateObject("ADODB.Recordset")
  22.         rs2.open sql, Conn
  23.  
  24.         Dim aProducts
  25.  
  26.         If not rs2.EOF then
  27.  
  28.             aProducts = rs2.GetRows()
  29.  
  30.             'Close Recordset to use the new array with the 2 columns data
  31.             rs2.Close()
  32.             set rs2 = Nothing
  33.  
  34.             'Declare Constants for the above SQL columns for better readability
  35.             'Use these Constants instead of referring to the array numeric indexes
  36.             Const c_CatID = 0
  37.             Const c_ProductName = 1
  38.             Const c_ProductID = 2
  39.  
  40.             'Ubound(MyArray,1) 'Returns the Number of Columns
  41.             'Ubound(MyArray,2) 'Returns the Number of Rows
  42.  
  43.             Dim iRowLoop
  44.  
  45.             For iRowLoop = 0 to UBound(aProducts, 2)
  46.             %>
  47.             <li>
  48.                     <input type="radio" name="prodid" id="prodid<%=aProducts(c_ProductID,iRowLoop)%>" value="<%=aProducts(c_ProductID,iRowLoop)%>">
  49.                     <%=aProducts(c_ProductName,iRowLoop)%>
  50.                     <%
  51.                     Counter = Counter + 1
  52.                     Counter = Counter - 1
  53.                     %>
  54.             </li>
  55.             <%
  56.             Next 'iRowLoop
  57.         End If 'rs2.EOF
  58.  
  59. End Function
  60. %>
  61.  
  62.  
Thanks. Any input how to combine the two pages into one page?
Dec 27 '06 #1
  • viewed: 2161
Share:
1 Reply
acoder
Expert Mod 8TB
You could combine both pages into one, but it'd just make maintenance more difficult. You'd have to have separate code within one page - one for the normal page and the other for Ajax-called code. It's much easier to maintain separated.
Jun 3 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by robert.differentone | last post: by
5 posts views Thread by Kristen | last post: by
1 post views Thread by =?Utf-8?B?TGFycnkgRXBu?= | last post: by
2 posts views Thread by Arthur Dent | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.