Link tree. [Archive] - WebDeveloper.com

Squall Leonhart

11-24-2003, 07:04 PM

Hi, guys
I have question about Link tree in Javascript
For example, if you click +sign on the right, it shows child menu below.

+Parent menu -> -Parent menu
Child menu1
Child menu2
Child menu3

Please take a look at code.

<HTML>
<HEAD>
</HEAD>
<BODY LEFTMARGIN=0 MARGINWIDTH="0" MARGINHEIGHT="0">
<%
'Dimension variables
Dim adoCon 'Holds the Database Connection Object
Dim rsCategory1
Dim rsCategory2
Dim rsCategory3
Dim strSQL1
Dim strSQL2
Dim strSQL3
Set adoCon = Server.CreateObject("ADODB.Connection")
Set rsRequest = Server.CreateObject("ADODB.Recordset")
Set rsTime = Server.CreateObject("ADODB.Recordset")
Set rsCategory1 = Server.CreateObject("ADODB.Recordset")
Set rsCategory2 = Server.CreateObject("ADODB.Recordset")
Set rsCategory3 = Server.CreateObject("ADODB.Recordset")
strSQL1 = "SELECT * FROM tblFAQ WHERE Category= 'Basic Computing/Basic Networking'"
strSQL2 = "SELECT * FROM tblFAQ WHERE Category= 'Security/Advanced Networking/Internet'"
strSQL3 = "SELECT * FROM tblFAQ WHERE Category= 'Internal Application'"
adoCon.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("tech_re.mdb")
rsCategory1.CursorType = 3
rsCategory2.CursorType = 3
rsCategory3.CursorType = 3
rsCategory1.Open strSQL1, adoCon
rsCategory2.Open strSQL2, adoCon
rsCategory3.Open strSQL3, adoCon
%>
<table width=100%>
<TR>
<TD colspan=2 align=center>FAQs</td>
</TR>
<TR>
<TD colspan=2 ALIGN=CENTER WIDTH=300></td>
</TR>
<TR>
<TD>&nbsp</td>
</tr>
<TR>
<TD>Basic Computing/Basic Networking</TD>
</TR>
<tr>
<td>&nbsp</td>
</tr>
<% Do while not rsCategory1.eof %>
<TR>
<TD WIDTH="300" ALIGN=left nowrap><A href="<%=rsCategory1("Doc_ID")%>"><li><%=rsCategory1("Description")%></li></A></TD>
</TR>
<% rsCategory1.Movenext
Loop
%>
<tr>
<td>&nbsp</td>
</tr>
<TR>
<TD>Security/Advanced Networking/Internet</TD>
</TR>
<tr>
<td>&nbsp</td>
</tr>
<% Do while not rsCategory2.eof %>
<TR>
<TD WIDTH="300" ALIGN=left nowrap><A href="<%=rsCategory2("Doc_ID")%>"><li><%=rsCategory2("Description")%></li></A></TD>
</TR>
<% rsCategory2.Movenext
Loop
%>
<tr>
<td>&nbsp</td>
</tr>
<TR>
<TD>Internal Application</TD>
</TR>
<tr>
<td>&nbsp</td>
</tr>
<% Do while not rsCategory3.eof %>
<TR>
<TD WIDTH="300" ALIGN=left nowrap><A href="<%=rsCategory3("Doc_ID")%>"><li><%=rsCategory3("Description")%></li></A></TD>
</TR>
<% rsCategory3.Movenext
Loop
%>
<TR>
<TD>&nbsp</td>
</tr>
</table>

<%'Reset server objects
rsCategory1.Close
rsCategory2.Close
rsCategory3.Close

Set rsCategory1 = Nothing
Set rsCategory2 = Nothing
Set rsCategory3 = Nothing
Set adoCon = Nothing
%>

</BODY>
</HTML>

For example,

I want to make content of <% Do while not rsCategory1.eof %>
<TR>
<TD WIDTH="300" ALIGN=left nowrap><A href="<%=rsCategory1("Doc_ID")%>"><li><%=rsCategory1("Description")%></li></A></TD>
</TR>
<% rsCategory1.Movenext
Loop
%>

if I click Basic Computing/Basic Networking
Do you guys know how to create link tree? Thanks

Vladdy

11-24-2003, 07:50 PM

<table>s, s.... how about getting rid of that 20th century crap and starting with the simple

<ul>
<li>Item 1</li>
<li>Item 2
<ul><li>Item 2.1</li>
<li>Item 2.2</li>
</ul></li>

</ul>

Then the task of expanding collapsing child lists becomes very easy....

Squall Leonhart

11-25-2003, 01:11 PM

Thanks for reply.
But I want to make text clickable and when I click it, it should generate the child tree.

pyro

11-25-2003, 01:18 PM

Here's something I threw together as a test. I should have used lists (as Vladdy demonstrated) but haven't had time to port it over...

http://www.infinitypages.com/research/treemenu.htm

Vladdy

11-25-2003, 01:29 PM

First, my understanding is that the whole tree is generated server side and expansion/collapsing of branches is done client side using javascript. If not you are in the wrong forum.
Second, if you want to make clicking on the text of the menu item expand/collapse the sub-list you add a simple function:

<script>
function pageInit()
{ lst = document.getElementById('mylist');
items = lst.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
{ if(items[i].lastChild.nodeName == 'ul')
{ items[i].firstChild.onclick = expandCollapse;
items[i].lastChild.style.display = 'none';
}
}
}

function expandCollapse(el)
{ el.nextSibling.style.display = el.nextSibling.style.display == 'none' ? '' : 'none';
return false;
}
</script>
....
<ul id="mylist">
<li>Item 1<ul><li>Item 1.1</li>
<li>Item 1.2</li></ul><li>
...
</ul>

Squall Leonhart

11-25-2003, 06:20 PM

Thanks for reply, Vladdy
I copied and pasted your code above to my page.
But the item1 is not still clickable. It seems it's not responding to script above.