Coldfusion and show/hide content 1

[GUJUm0deL]

Hi folks, wonder if there is an easier way of doing this. On my main page, I load all the content sectioned off by program.

EX:
PROG1
someconetent1
someconetent2
someconetent3
someconetent4

PROG2
someconetent1
someconetent2

PROG3
someconetent1
someconetent2
someconetent3
someconetent4
someconetent5
someconetent6
ETC ETC ETC

Now, what I want to do is have the user click on the main prog name (as in PROG1 or PROG2, etc) and then display the content for it underneath.

If this was static content I can use the CSS show/hide code, but this is dynamic. Any ideas on how I can do this?

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[TamedTech]

Flash or Java perhaps, i've not done it myself but those would be the first avenues i would explore.

Rob

 

[GUJUm0deL]

Hmmm, can't use Flash and Java is a 'ehhh' issue here. I'd much rather use either CSS or JS or DHTML.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[Wullie]

I might be missing something, but I think you are making this overly complicated. Use the exact same method you would use for static content, but build the code dynamically. That really is all there is to to.

Hope this helps

Wullie

Fresh Look - Quality Coldfusion 7/Windows Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

 

[GUJUm0deL]

Thanks Wullie. That is what I am trying to do, but I get wierd results. If I have 3 programs, then all the content shows the same info.

EX:
PROG1
link: PROG1someconetent1
link: PROG1someconetent2
link: PROG1someconetent3
link: PROG1someconetent4

PROG2
link: PROG1someconetent1
link: PROG1someconetent2
link: PROG1someconetent3
link: PROG1someconetent4

PROG3
link: PROG1someconetent1
link: PROG1someconetent2
link: PROG1someconetent3
link: PROG1someconetent4

I have one main query that returns all relative info so that when the user clicks on the link they can edit that program's contect.

Then I have another query that gets back all the programs.

Then I loop through the secondquery and then output results from the 1st query.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[Wullie]

Hi mate,

Post the relevent code here and we should be able to find the problem.

Hope this helps

Wullie

Fresh Look - Quality Coldfusion 7/Windows Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

 

[GUJUm0deL]

Hey Wullie,

This is what my code looks like:

<cfquery name="getTuition" datasource="#DB#">
	SELECT	 tf.Tuition_Fee_ID, tf.Name AS tfName, tf.Created_By, tf.Program_AT_Term_ID AS tfPATT, 	
			 tf.Start_Date, patt.Program_AT_Term_ID AS pattPATT, patt.term_id, p.Program_ID, p.Name AS pName, t .term_ID, t .Term_Year, t .term_type_id
	FROM     Tuition_Fee tf INNER JOIN Program_AT_Term patt ON tf.Program_AT_Term_ID = patt.Program_AT_Term_ID INNER JOIN
			 Program p ON p.Program_ID = patt.Program_ID INNER JOIN
			 term t ON t .term_id = patt.term_id INNER JOIN
			 term_type tt ON tt.term_type_ID = t .term_type_ID
	ORDER BY P.Name
</cfquery>

<cfquery name="getprog" datasource="#DB#">
	SELECT 	 Program_ID, Name
	FROM	 Program
	ORDER BY Name 
</cfquery>
<cfset gm = valuelist(getProg.name)>

<script>
	function toggleDiv(divName) {
	  thisDiv = document.getElementById(divName);
	  if (thisDiv) {
		if (thisDiv.style.display == "none") {
		  thisDiv.style.display = "block";
		}
	  }
	  else {
		alert("Error: Could not locate div with id: " + divName);
	  }
	}
</script>
									
<cfloop index="x" list="#gm#">
	<tr>
		<td valign="top">
			<cfoutput><a href="##" onClick="toggleDiv('#x#');">#x#</a></cfoutput> <br/>
		</td>
	</tr>
	
	<cfoutput query="getTuition" group="pName">
	<tr>
		<td valign="top">
		<div id="#x#" style="display: none;">
			<table width="605" border="0" cellpadding="2">
				<tr><td width="305">theName</td></tr>
				<cfoutput>
					<tr><td><a href="x.cfm?qwerty=#ID#"><strong>#theName#</strong></a></td></tr>
				</cfoutput>
			</table>
		</div>
		</td>
	</tr>
	</cfoutput>
</cfloop>

Thanks.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[imstillatwork]

So you looping through a list of program names from one query,

then on each iteration of the loop, your are ouputing the SAME data, for as many iterations of #gm#

you should be able to get the program name in the main query also, cfoutput the main query with a group by, then output the rest for each program name.

the second query to get the program names is not needed at all.

lets get the data you want on screen forst, then we'll fix the formating of the divs and html for the hide/show effect.


Kevin

http://www.lot-o-nothin.com/cfml/

 

[GUJUm0deL]

imstillatwork, the 1st query gives me all I need to move onto the next step. The second query was used so I only get back a distict program name so I can do my hide/show div feature.

The program name that returns from the first query has other columns associated with it so the same program name appears more then once. I thought about using a GROUP BY in the query, but instead used the GROUP attribute in the <CFOUTPUT QUERY>

If I didn't need to do this then my page works just as it should, without any redundant querycall or code. But today they wanted to let the user choose what program info they should see. I think its pointless, but hey they pay me. LOL...

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[imstillatwork]

Yeah, you only need one query, unless I am totaly missing something.

You want the program names (the main output, using groupby). Under each program name, you want the tuition information (multiplerows, the secondary output)

<cfoutput query="getData">
Gets all programs, and tuition info
</query>

<cfoutput query="getData" groupby="programID">
<a href="##" onClick="toggleDiv('#ProgramID#');">#ProgramName#</a>
<div id="#programID#" DIV TO HIDE/SHOW>
<cfoutput>
#tuitionName# ...tuition info (multiple rows per program)
</cfoutput>
</div>
</cfoutput>

Something like this needs to happen. The query needs to change.


Kevin

http://www.lot-o-nothin.com/cfml/

 

[GUJUm0deL]

imstillatwork, you're absolutely right! I don't know why I made it more complicated then it had to be. I always do that.

I just did what you illustrated and it worked like a charm.

Thanks man.


____________________________________
Just Imagine.

http://www.imajinarts.com

 

[imstillatwork]

Great!

Kevin

http://www.lot-o-nothin.com/cfml/