Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Output problem

  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Output problem

    I have a toggle that will show a record when the box is opened:

    + Project 1
    then when I open it will show:
    - Project 1
    Mark Jones

    The problem is I have several Projects (Project 1, Project 2, Project 3 etc..) that should be shown from the query and it only shows one (Project 1). Please advise how I can get this to work where it will show all my projects from the query.

    So it now looks like this:

    + Project 1

    and it should look like this if you can help me get it to work:

    + Project 1
    + Project 2
    + Project 3
    etc..

    I have all this in a Cold Fusion page and the problem seems to be the JavaScript holds it to one record. How can I get this to work. If I take out the JavaScript I can get multiple records but need to get it to work with JavaScript so I can use a toggle. Please advise
    Here is the script:
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function showDetails(theButton, theDiv)
    {
    if(document.getElementById(theDiv).style.visibility == 'hidden')
    {
        document.getElementById(theDiv).style.position="relative";
        document.getElementById(theDiv).style.visibility="visible";
        theButton.value = ' - ';
    }
    else
    {
    document.getElementById(theDiv).style.position="absolute";
    document.getElementById(theDiv).style.visibility="hidden";theButton.value = ' + ';
    }
    }
    </SCRIPT>
    </head>
    <body>
     
    <cfquery name="get_poc" datasource="theData">                        
    SELECT *
    FROM myTable
    </cfquery>    
    <cfoutput query = "get_poc">
    <form>
    <input type="button" onclick="showDetails(this, 'layer')" value=" + ">
    Project #myID# 
    </form>
    <div id="layer" style="position: absolute; visibility: hidden; top: 0px; left: 0px;">
    #firstName#  #LastName#
    </cfoutput>

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>55199</title>
    	</head>
    	<body>
    		<dl>
    			<cfquery name="get_poc" datasource="theData">SELECT * FROM myTable</cfquery>
    			<cfoutput query = "get_poc">
    			<dt>
    				Project #myID#
    			</dt>
    			<dd>
    				#firstName#  #LastName#
    			</dd>
    			</cfoutput>
    		</dl>
    
    		<script type="text/javascript">
    			var dt = document.getElementsByTagName('dt');
    
    			for(var i = 0; i < dt.length; i++)
    			{
    				dt[i].addEventListener("click", toggle, true);
    				var dd = findNextSibling(dt[i], 'dd');
    				dd.style.display = 'none';
    			}
    
    			function toggle(e)
    			{
    				var dd = findNextSibling(e.currentTarget, 'dd');
    
    				if(dd)
    				{
    					dd.style.display = (dd.style.display == 'none') ? '' : 'none';
    				}
    			}
    
    			function findNextSibling(obj, tag)
    			{
    				if(obj.nodeName.toLowerCase() != tag)
    				{
    					obj = findNextSibling(obj.nextSibling, tag);
    				}
    
    				return obj;
    			}
    
    		</script>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •