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
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
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 + ' » ';
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;" />
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;" />
<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>
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..
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..
ASKER
Well here is the <cfinclude template="predefined/direc
code for that page.
Do the hidden fields on this page need to be set to ""
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>ASKER
disregard that last question. I believe I have solved my problem thanks for the help. I'll split the points
ASKER
Thanks for the help everyone
Maybe setup a separate query for your excel sheet?