• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 495
  • Last Modified:

Family Tree using Coldfusion Database

This is urgent, I need an answer quickly if at all possible.  I have a gentleman who wants his home page to be an expandable and contractable family tree.  So I am using an access database and using codes to match up kids with parents.  Basically using two codes.  One is a generation code called "Tier" and then a code to link up kids to fathers called a "familycode".  I figure if I can somehow get this data to pass thru the tables then using a java script I found off of Dynamic Drive I should be able to contract and expand the lines.  When someone clicks on grandson2 they get only his kids that drop down.

Here is my code without the CFOUTPUT tags in it because no matter what, I can't get the tags to work for me.

<head>
      <title>Untitled</title>
<CFQUERY NAME="Tiers" DATASOURCE="mcguire">
    SELECT *
    FROM test
</CFQUERY>
<CFQUERY NAME="Tier1" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=1
</CFQUERY>
<CFQUERY NAME="Tier2" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=2
</CFQUERY>
<CFQUERY NAME="Tier3" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=3
</CFQUERY>
<CFQUERY NAME="Tier4" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=4
</CFQUERY>
<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>


</head>

<body>

<h3 align="center" onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">McGuire</h3>

<div id="sc1" class="switchcontent">

<TABLE border="1" align="center"><TR>

<TD align="center" onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer">#FirstName#

      <TABLE border="1"><TR id="#FamilyCode#" class="switchcontent">      

            <TD align="center" onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer">#FirstName#

                  <TABLE border="1"><TR id="#FamilyCode#" class="switchcontent">

                  <TD align="center" onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer">#FirstName#

                        <TABLE border="1"><TR id="#FamilyCode#" class="switchcontent">
                        <TD align="center">#FirstName#

                        </td>
                        </tr></table>
                  </td>
                  </tr></table>
      </td>
      </tr></table>
</td>

</tr></table>

</div>


Anything you can do to help??
0
austintre
Asked:
austintre
  • 6
  • 5
1 Solution
 
campbelcCommented:
This is better placed in the Javascript category. I know why it isn't working, has to do with your onClick="expandcontent('#FamilyCode#')" all having the exact same information. The Javascript code I'm sure is opening up all levels at once.
0
 
austintreAuthor Commented:
It needs to be in the ColdFusion section because using CFOUTPUT I am thinking that by using ('#FamilyCode#') as a coldfusion variable it should expand and contract only the cells that match each other from the database.  Does that make sense?  There is code missing from the above because I can't figure out how to make coldfusion dynamically fill that "FamilyCode" Variable.  I understand the Java part of it.  I need help with the coldfusion part of it.
0
 
campbelcCommented:
Ok, can you post it with the CFOUTPUT tags in place. Yes, now that does make sense. I didn't see any CFOUTPUT tags which told me you were repeating the code of all these tiers. Though, this isn't going to work. Sure, include all the code for this page and I'll get you working.
0
NEW Veeam Backup for Microsoft Office 365 1.5

With Office 365, it’s your data and your responsibility to protect it. NEW Veeam Backup for Microsoft Office 365 eliminates the risk of losing access to your Office 365 data.

 
austintreAuthor Commented:
I have tried it a million different ways but here is the one that gets the closest.  Maybe it won't work but there has to be someway that I can do this.  Thanks for your help!

<head>
      <title>Untitled</title>
      
<CFQUERY NAME="Tier1" DATASOURCE="mcguire">
    SELECT *
    FROM users
      WHERE tier=1
</CFQUERY>
<CFQUERY NAME="Tier2" DATASOURCE="mcguire">
    SELECT *
    FROM users
      WHERE tier=2
</CFQUERY>
<CFQUERY NAME="Tier3" DATASOURCE="mcguire">
    SELECT *
    FROM users
      WHERE tier=3
</CFQUERY>
<CFQUERY NAME="Tier4" DATASOURCE="mcguire">
    SELECT *
    FROM users
      WHERE tier=4
</CFQUERY>
<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>


</head>

<body>

<h3 align="center" onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">McGuire</h3>

<div id="sc1" class="switchcontent">
<TABLE border="1" align="center"><TR>
<CFOUTPUT QUERY="Tier1">
<TD align="center"><h3 onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">#FirstName#</h3>
</CFOUTPUT><CFOUTPUT QUERY="Tier1">
      <TABLE border="1"><TR id="#FamilyCode#" class="switchcontent"></CFOUTPUT>
            <CFOUTPUT QUERY="Tier2">
            <TD align="center"><h3 onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer">#FamilyCode#</h3>
            </CFOUTPUT><CFOUTPUT QUERY="Tier2">
                  <TABLE border="1"><TR id="#FamilyCode#" class="switchcontent"></CFOUTPUT>
                  <CFOUTPUT QUERY="Tier3">
                  <TD align="center"><h3 onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer">#FirstName#</h3>
                  </CFOUTPUT><CFOUTPUT QUERY="Tier3">
                        <TABLE border="1"><TR id="#FamilyCode#" class="switchcontent"></CFOUTPUT>
                        <CFOUTPUT QUERY="Tier4">
                        <TD align="center"><h3 onClick="expandcontent('#FamilyCode#')" style="cursor:hand; cursor:pointer">#FirstName#</h3>
                        </CFOUTPUT>
                        </td>
                        </tr></table>
                  </td>
                  </tr></table>
      </td>
      </tr></table>
</td>
</tr></table>
</div>
0
 
campbelcCommented:
Ok, I understand what you are trying to do now. To clarify though:

- Grandpa

 --- Grandpas's Son (John)
          --- Johns' Son (Mike)
          --- John's Daugter (Suzy)

 --- Grandpa's Daughter (Mary)
         --- Mary's Daughter (April)


etc...

Then you only want John's kin to show if John's name has been clicked on, and Mary's kids wouldn't be shown if John was clicked on?
0
 
austintreAuthor Commented:
Exactly,  but it needs to look like this

                                                 Grandpa
                                 John          George              Mary
                      Mike    Suzy    Billy        

All nice neat and organized.  Is this a pipe-dream or what?                                
0
 
campbelcCommented:
Not a pipe-dream, just might have to make a few changes. Working on a solution here. I would suggest that the layout go down as I suggested because the layout will get VERY messy once this gets a few layers deep.

For readabiliy you could go vertical and even give each tier/generation its own color.

One of the issues you have right now is you don't have anyway to specify the hiarachy of the tree.

Will these be input into the database via Access or Coldfusion?
0
 
austintreAuthor Commented:
Yes, there is an access database.  What I want to do is make it totally dynamic.  So another grandson comes along I don't have to input the data they fill out a form that inputs it into the database and the hierarchy automatically changes.

A generation code and then a family code that goes something like this.

Son1 - 1
Son2 - 2
Daughter1 - 3

Son1's Son1 -11
Son1's Son2 -11
Son1's Daughter - 11

Son2's Daughter - 21

Son1's Son1's Son - 111

etc

However, if I forego the format that I was trying for and do it how you suggest (which isn't a bad idea at all) then I could use the generation code to indent and the family code could be the same for all generations within the same family (ie Son1's kids grandkids greatgrandkids).   What do you think?
0
 
campbelcCommented:
Right, thinking of an application I did quite awhile ago that was like this. The application was a company directory that showed contact information for each employee as well as when you viewed details for the employee you would see their supervisor along with a link back to there contact information. This falls along the same lines.

Still working..
0
 
austintreAuthor Commented:
Ok, so I figured it out.  Just in case anyone is ever thinking of doing this - here is the answer.

<head>
      <title>Untitled</title>

<CFQUERY NAME="Tiers" DATASOURCE="mcguire">
    SELECT *
    FROM test
</CFQUERY>
<CFQUERY NAME="Tier1" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=1
</CFQUERY>
<CFQUERY NAME="Tier2" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=2
</CFQUERY>
<CFQUERY NAME="Tier3" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=3
</CFQUERY>
<CFQUERY NAME="Tier4" DATASOURCE="mcguire">
    SELECT *
    FROM test
      WHERE tier=4
</CFQUERY>
</head>

<body>
<CFIF isdefined("url.tier")>
      <CFSET tier = #url.tier#>
      <CFSET family=#url.family#>
<CFELSE>
      <CFSET tier = 1>
      <CFSET family = 0>
</CFIF>

<TABLE border="1" align="center">
<CFIF tier EQ 1>
<TR border="1" align="center"><CFOUTPUT query="Tier1"><TD align="center"><A HREF="index2.cfm?tier=2&family=#familycode#">#FirstName#</TD></cfoutput></cfif></a></TR>

<CFIF (tier EQ 2)>
<TR border="1" align="center"><CFOUTPUT query="Tier1"><TD align="center"><A HREF="index2.cfm?tier=2&family=#familycode#">#FirstName#</TD></cfoutput></a></TR>
<TR border="1" align="center"><CFOUTPUT query="Tier2"><TD align="center"><a href="index2.cfm?tier=3&family=#familycode#"><CFIF mid (#familycode#,1,1) EQ family>#FirstName#</cfif></td></a></cfoutput></cfif></TR>

<CFIF (tier EQ 3)>
<TR border="1" align="center"><CFOUTPUT query="Tier1"><TD align="center"><A HREF="index2.cfm?tier=2&family=#familycode#">#FirstName#</TD></cfoutput></a></TR>
<TR border="1" align="center"><CFOUTPUT query="Tier2"><TD align="center"><a href="index2.cfm?tier=3&family=#familycode#"><CFIF mid (#familycode#,1,2) EQ family>#FirstName#</cfif></td></a></cfoutput></TR>
<TR border="1" align="center"><CFOUTPUT query="Tier3"><TD align="center"><a href="index2.cfm?tier=4&family=#familycode#"><CFIF mid (#familycode#,1,2) EQ family>#FirstName#</cfif></td></a></cfoutput></cfif></TR>

<CFIF (tier EQ 4)>
<TR border="1" align="center"><CFOUTPUT query="Tier1"><TD align="center"><A HREF="index2.cfm?tier=2&family=#familycode#">#FirstName#</TD></cfoutput></a></TR>
<TR border="1" align="center"><CFOUTPUT query="Tier2"><TD align="center"><a href="index2.cfm?tier=3&family=#familycode#"><CFIF mid (#familycode#,1,3) EQ family>#FirstName#</cfif></td></a></cfoutput></TR>
<TR border="1" align="center"><CFOUTPUT query="Tier3"><TD align="center"><a href="index2.cfm?tier=4&family=#familycode#"><CFIF mid (#familycode#,1,3) EQ family>#FirstName#</cfif></td></a></cfoutput></TR>
<TR border="1" align="center"><CFOUTPUT query="Tier4"><TD align="center"><a href="index2.cfm?tier=5&family=#familycode#"><CFIF mid (#familycode#,1,3) EQ family>#FirstName#</cfif></td></a></cfoutput></cfif></TR>
</body>
</html>

Thanks for looking into this campbelc.  Just for talking to me you get all the points.  Thanks for the help.
0
 
campbelcCommented:
Lol, glad you were able to figure this out. Sorry, ran into some family problems I had to deal with.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now