AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of rudodoo
rudodoo
 asked on

I need Coldfusion to call JavaScript functions

I'm trying to create a report for my company using Coldfusion MX 7.  The report contains JavaScript functions that allow him/her to expand or collapse multiple columns within the report.

My responsibilty is to output the report to excel and have the spreadsheet display only the columns that the user has expanded and hide the collapsed ones.  

Basically I need the spreadsheet to mirror what's on the screen when the user clicks on the export to excel function.  The problem is that Coldfusion outputs all of the columns on the spreadsheet instead of just the ones that are showing on the screen.

How can I get Coldfusion to call on the JavaScript functions that hide or display the columns when its doing the excel export
ColdFusion LanguageWeb Languages and StandardsJavaScript
Avatar of undefined
Last Comment
rudodoo
8/22/2022 - Mon
Andrew Maurer
ColdFusion can't call Javascript functions. Javascript is client side and CF is server side. Without some code to see and work with, it makes it difficult to help.

Maybe setup a separate query for your excel sheet?
SOLUTION
digicidal
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
gdemaria
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
rudodoo
ASKER
Ok I understand what you guys are trying to tell me but my JavaScript knowledge is really low.  So I'm attaching some code to see if there are any tweaks that I need to make on the screen page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Page-Enter" content="blendtrans(duration=2.0)" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="styles/turnoverstyle.css" />
<link rel="stylesheet" href="styles/lightbox2.css" media="screen,projection" type="text/css" />
 
function doexport()	{	
	tablediv = document.getElementById('tbl');
	table = tablediv.innerHTML;
	
	//alert(table);
	
	document.frmrptvalue.reportData.value = table;
	document.frmrptvalue.submit();
}
 
//Overriding the default TAR.getName	
TAR.getName = function(report) {
	var td = document.createElement("td");
	var alink = document.createElement("a");
	var image = document.createElement("img");
	var txt = document.createTextNode(' ' + report.NAME);
	image.src = 'images/down.gif';
	alink.href = '#';
	alink.appendChild(image);
	alink.appendChild(txt);
	//alink.innerText = report.NAME;	
	alink.onclick = function() { 
		DWRUtil.setValue("position", report.POSITIONNUMBER);
		TAR.getToolData(report.AC_YYYYMM,report.POSITIONNUMBER);
		nameDiv = document.getElementById("view_level_drill");
		alink2 = document.createElement("a");
		alink2.href = '#';
		alink2.innerText = report.NAME;
		alink2.onclick = function () {
			TAR.getToolData(report.AC_YYYYMM,report.POSITIONNUMBER);}
		nameDiv.innerHTML = nameDiv.innerHTML + ' &raquo; ';
		nameDiv.appendChild(alink2);
	}
	td.appendChild(alink);	
	td.setAttribute('align','left');
	return td;
};
 
function Init() {
	DWRUtil.useLoadingMessage();
	DWREngine._errorHandler =  TAR.errorHandler;
	
	Reset();
}
 
function Reset() {
	<cfoutput>
		TAR.getToolData('#SESSION.tool.yyyymm#','#SESSION.tool.position#');
		DWRUtil.setValue("yyyymm", '#SESSION.tool.yyyymm#');
		DWRUtil.setValue("position", '#SESSION.tool.position#');
		DWRUtil.setValue("monthDisplay", TAR.spellMonth('#SESSION.tool.yyyymm#'));
	</cfoutput>
	
	ClearDrillDowns();
}
 
function ClearDrillDowns() {
	nameDiv = document.getElementById("view_level_drill");
	nameDiv.innerHTML = '';
}
 
function nextMonth() {
	var currentPeriod = DWRUtil.getValue("yyyymm");
	var currentPosition = DWRUtil.getValue("position");
	var nextPeriod = TAR.nextPeriod(currentPeriod);
	
	DWRUtil.setValue("yyyymm", nextPeriod);
	
	DWRUtil.setValue("monthDisplay", TAR.spellMonth(nextPeriod));
	
	TAR.getToolData(nextPeriod,currentPosition);
	
}
 
function prevMonth() {
	var currentPeriod = DWRUtil.getValue("yyyymm");
	var currentPosition = DWRUtil.getValue("position");
	var prevPeriod = TAR.prevPeriod(currentPeriod);
	
	DWRUtil.setValue("yyyymm", prevPeriod);
	
	DWRUtil.setValue("monthDisplay", TAR.spellMonth(prevPeriod));
	
	TAR.getToolData(prevPeriod,currentPosition);
	
}
 
</script>
 
<style id="stylecat_1">.showhide_1 {display:none}</style>
<style id="stylecat_2">.showhide_2 {display:none}</style>
<style id="stylecat_3">.showhide_3 {display:none}</style>
<style id="stylecat_4">.showhide_4 {display:none}</style>
<style id="stylecat_5">.showhide_5 {display:none}</style>
 
<script language="jscript">
 
function showhide(cat_id) 
{
	try 
	{
		var Expanded = document.getElementById("expanded_"+cat_id);
		if (Expanded.value == 0)
		{
			Expanded.value = 1;
			document.getElementById("plusminus_"+cat_id).src="images/minus.gif";
			eval("document.styleSheets.stylecat_"+cat_id+".rules[0].style.display='inline'");
			document.getElementById("th_cat_"+cat_id).colSpan=document.getElementById("maxcols_"+cat_id).value;
		}
		else
		{
			Expanded.value = 0;
			eval("document.styleSheets.stylecat_"+cat_id+".rules[0].style.display='none'");
			document.getElementById("th_cat_"+cat_id).colSpan=document.getElementById("mincols_"+cat_id).value;
			document.getElementById("plusminus_"+cat_id).src="images/plus.gif";
		}
		if (nSaveChanges)
			setVar("dispcat_"+cat_id, Expanded.value);
	}
	catch(e) {};
}
 
var expanded = false;
 
function expandAll() {
	showhide(1);
	showhide(2);
	showhide(3);
	showhide(4);
	showhide(5);
	
	if(expanded == false) {
		expanded = true;
		document.getElementById('expandAll').innerHTML = 'Collapse All';
	} 
	else {
		expanded = false;
		document.getElementById('expandAll').innerHTML = 'Expand All';
	}
}
</script>
<script src="scripts/menu.js"></script>
<title>Turnover Tool</title>
</head>
<body onload="Init();">
 
<!---<cfoutput><body onclick="Init('#url.rpt#');"></cfoutput>--->
 
 
<!--- <cfif isdefined('URL.excel') AND URL.excel eq 1>
	<cfheader name="Req Values" value="Inline;filename=req.xls">
	<cfcontent type="application/vnd.ms-excel">
</cfif>
 --->
<div id="page">
 
<div id="header_buttons">
<!--- /////// HEADER HEADER HEADER HEADER HEADER HEADER /////// --->
	<cfinclude template="header.cfm"> 
<!--- /////// HEADER HEADER HEADER HEADER HEADER HEADER /////// --->
</div>
 
	<div id="menu">
	<img src="images/turnover_menu.png" />
	</div>
	<div id="logout">
	<a href="logout.cfm">
	<font color="#0066FF" style="text-decoration:underline">Logout</font>
	</a>
	</div>
	
<cfoutput>
<cfif isDefined("form.MID2")>
<div id="view_level">
<img src="images/up.gif" />
Level of View: <cfoutput><a href="##" onclick="Reset();">#form.MID2#</a></cfoutput>
<span id="view_level_drill"></span>
</div>
<cfelse>
<div id="view_level">
<img src="images/up.gif" />
Level of View: <cfoutput><a href="##" onclick="Reset();">#session.tool.name#</a></cfoutput>
<span id="view_level_drill"></span>
</div>
</cfif>
</cfoutput>
 
<cfif not isdefined('URL.excel')>
<cfoutput>
<b>
<a href="##" onclick="doexport();" style="color:##333333; font-size:11px; position:absolute; right:13px; top:245px; font-family:Arial, Helvetica, sans-serif;">
<img src="images/LogoExcel.gif" height="14" width="14" style="position:absolute; right:82px;" />
 
&nbsp;Export to Excel
</a>
</b>
<b>
<a id="expandAll" href="javascript:expandAll();" style="color:##333333; font-size:11px; position:absolute; left:200px; top:245px; font-family:Arial, Helvetica, sans-serif;">Expand All</a>
</b>
<b>
<a href="data_selection.cfm" style="color:##333333; font-size:11px; position:absolute; left:10px; top:245px; font-family:Arial, Helvetica, sans-serif;">
<img src="images/ds.gif" height="14" width="14" style="position:absolute; left: 90px;" />
&nbsp;<b>Data Selections</b>
</a>
</b>
 
</cfoutput>
</cfif>
	<div style="position:absolute; top:800px; left:440px;">
	<img src="images/csslogosmall.png" />
	</div>
</div>
 
<cfparam name="url.rpt" default="2">
 
<cfform action="excelexport.cfm?Excel=1" name="frmrptvalue" target="_blank" method="post" >
<input type="hidden" name="reportData" value="">
<input type="hidden" name="yyyymm" id="yyyymm" value="">
<input type="hidden" name="position" id="position" value="">
 
<div id="tbl">
	<cfoutput>
	
		<cfinclude template="predefined/direct_reports.html">
 
	</cfoutput>
</div>
 
</cfform>
 
<cfoutput>
<div style="position:relative; top:22px;">
<center>
<a href="##" onClick="prevMonth();">
<img src="images/minus.gif" />
</a>
<font face="Arial, Helvetica, sans-serif" size="+1">
<b><span id="monthDisplay"></span></b>
</font>
<a href="##" onClick="nextMonth();">
<img src="images/plus.gif" />
</a><br />
<span style="font-size:12px; font-weight:bold;">As of Nov. 8</span>
</center>
</div>
</cfoutput>
 
</body>
</html>

Open in new window

gdemaria
Lines 114 to 117 are exactly what I was talking about.  You find the element and set the value to either 1 or 0 depending on whether it's exanded or not.

But I don't see what is being referred to by  "expanded_"+ cat_id
Do you have a hidden field or div or something with an ID of expanded_XXX (where XXX is the cat_id) ?

If it's a hidden field, you're golden..
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
rudodoo
ASKER
Well here is the <cfinclude template="predefined/direct_reports.html">
code for that page.

Do the hidden fields on this page need to be set to ""
<html>
<head>
<title>Direct Reports</title>
 
 
</head>
<body>
 
<center>
<TABLE border="1" cellpadding="5" cellspacing="2" bordercolor="#000000">
 
  <TR bgcolor="#CCCCCC">
    <TH style="text-align:left;vertical-align:top" id="th_cat_2" colspan="1">
	  <img class="a_img" id="plusminus_2" src="images/plus.gif" onClick="javascript:showhide('2')" style="cursor:hand" /> ID
	  <input type="hidden" id="mincols_2" value="1">
	  <input type="hidden" id="maxcols_2" value="2">
	  <input type="hidden" id="expanded_2" value="0">
	</TH>
    <TH colspan="1"></TH>
	<TH style="text-align:left;vertical-align:top" id="th_cat_4" colspan="1">
	  <img class="a_img" id="plusminus_4" src="images/plus.gif" onClick="javascript:showhide('4')" style="cursor:hand" /> Staff
	  <input type="hidden" id="mincols_4" value="1">
	  <input type="hidden" id="maxcols_4" value="4">
	  <input type="hidden" id="expanded_4" value="0">
	</TH>
    <TH style="text-align:left;vertical-align:top" id="th_cat_1" colspan="1">
      <img class="a_img" id="plusminus_1" src="images/plus.gif" onClick="javascript:showhide('1')" style="cursor:hand" /> Term
	  <input type="hidden" id="mincols_1" value="1">
	  <input type="hidden" id="maxcols_1" value="5">
	  <input type="hidden" id="expanded_1" value="0">
	</TH>
	<TH style="text-align:left;vertical-align:top" id="th_cat_5" colspan="1">
      <img class="a_img" id="plusminus_5" src="images/plus.gif" onClick="javascript:showhide('5')" style="cursor:hand" /> Turn
	  <input type="hidden" id="mincols_5" value="1">
	  <input type="hidden" id="maxcols_5" value="6">
	  <input type="hidden" id="expanded_5" value="0">
	</TH>
	<TH colspan="1"></TH>
	<TH style="text-align:left;vertical-align:top" id="th_cat_3" colspan="1">
	  <img class="a_img" id="plusminus_3" src="images/plus.gif" onClick="javascript:showhide('3')" style="cursor:hand" /> YTD
	  <input type="hidden" id="mincols_3" value="1">
	  <input type="hidden" id="maxcols_3" value="3">
	  <input type="hidden" id="expanded_3" value="0">
	</TH>
	<TH colspan="1"></TH>
	<TH colspan="1"></TH>
  </TR>
 
  <TR bgcolor="#CCCCCC">
    <TH scope="col" class="showhide_2">Posnbr</TH>
    <TH scope="col">Name</TH>
	<TH scope="col">Type(Man. Prof. Hrly)</TH>
    <TH scope="col">Beg. Staffing</TH>
    <TH scope="col" class="showhide_4">Hires</TH>
    <TH scope="col" class="showhide_4">Acquisitions</TH>
	<TH scope="col" class="showhide_4">Layoffs/ Diverstures</TH>
	<TH scope="col" class="showhide_1">Vol. Terms Curr. Month</TH>
	<TH scope="col" class="showhide_1">Vol. Terms Prior Month</TH>
	<TH scope="col" class="showhide_1">Invol. Terms Curr. Month</TH>
	<TH scope="col" class="showhide_1">Invol. Terms Prior Month</TH>
	<TH scope="col">Total Terms</TH>
	<TH scope="col" class="showhide_5">Transfers (in/Out)</TH>
	<TH scope="col" class="showhide_5">Other Adj.</TH>
	<TH scope="col" class="showhide_5">End Staffing</TH>
	<TH scope="col" class="showhide_5">Vol. Terms %</TH>
	<TH scope="col" class="showhide_5">Invol. Terms %</TH>
	<TH scope="col">Turnover %</TH>
	<TH scope="col">QTD Turnover %</TH>
	<TH scope="col" class="showhide_3">Avg Length of Time in Job</TH>
	<TH scope="col" class="showhide_3">Avg Length of Svc (months)</TH>
	<TH scope="col">YTD Turnover %</TH>
	<TH scope="col">YTD Turnover Target %</TH>
	<TH scope="col">YTD Turnover Variance</TH>
  </TR>
  <tbody id="toolData">
  </tbody>
</TABLE>
</center>
</body>
</html>

Open in new window

rudodoo
ASKER
disregard that last question.  I believe I have solved my problem thanks for the help.  I'll split the points
rudodoo
ASKER
Thanks for the help everyone
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent