Show/Hide DIV inside CFWINDOW?

Report · Oct 01, 2008

Hi Folks,
I have a CFWINDOW with two DIVs inside of it, and I am trying to figure out how to toggle the visibility using javascript. The normal document.getElementById(objBody).style.display does not work inside a CFWINDOW.

Any ideas on how I can do this? Examples highly appreciated!
Thanks,
/russ

Report · Oct 01, 2008

Report · Oct 02, 2008

I should have added
1) I use initShow="false" for the cfwindow and then ColdFusion.navigate to load the source.
2) I want to call the function in-line when the form completes redrawing, not from a URL.

Oddly enough, it works when you click the anchor and the event fires the call, but the in-line call generates the error. I can't figure out how to get it to fire automatically without an event. The form onLoad event doesn't seem to fire it either.

When I do that, it does not work. It returns an error 'Error processing javascript for markup element myWindow_body.'

Here is an example:

================== test.cfm ====================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head></head>
<body>

<script>
ShowHideDiv = function(el){
var theDiv = document.getElementById(el);
if (theDiv.style.display == 'none') {
theDiv.style.display = '';
} else {
theDiv.style.display = 'none';
}
}
</script>

<p>this is the calling page</p>

<cfwindow name="mywindow" center="true" closable="true" draggable="true"
height="300" width="300" title="My Window" initshow="false" />

<A HREF="javaScript:ColdFusion.Window.show('mywindow'); ColdFusion.navigate('detailTest.cfm', 'mywindow')" >click to test</a>
</body>
</html>

============ detailTest.cfm ==================
<p>this is a cfwindow</p>
<p><a href="javascript:ShowHideDiv('mydiv');">hide/show div</a></p>
<div id="mydiv" style="border:1px solid black;">
this is a div which you can hide and show... easily
</div>

<script language="JavaScript" type="text/javascript">
ShowHideDiv('mydiv');
</script>

Report · Oct 02, 2008

your code worked fine in my tests after i removed the
<script language="JavaScript"
type="text/javascript">ShowHideDiv('mydiv');</script>
from the window's source file (with it there you get the invalid markup
warning).

instead of calling the ShowHideDiv function in your cfwindow's source
page, just set the style of the div to what you want it to be initially.
i.e. if you want it to initially (on cfwindow open) be hidden, add
display:none to the div's style attribute.

here's the full test case code:

test.cfm page (calling page)
===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<script>
ShowHideDiv = function(el){
var theDiv = document.getElementById(el);
(theDiv.style.display == 'none') ? theDiv.style.display = '' :
theDiv.style.display = 'none';
}
</script>
</head>
<body>

<p>this is the calling page</p>

<cfwindow name="mywindow" center="true" closable="true" draggable="true"
height="300" width="300" title="My Window" initshow="false" />

<A HREF="javaScript:ColdFusion.navigate('detailTest.cfm',
'mywindow');ColdFusion.Window.show('mywindow');
" >click to test</a>
</body>
</html>

detailTest.cfm (cfwindow's source page)
======================
<p>this is a cfwindow</p>
<p><a href="javascript:ShowHideDiv('mydiv');">hide/show div</a></p>
<div id="mydiv" style="border:1px solid black;display:none;">
this is a div which you can hide and show... easily
</div>

if you want your div in the cfwindow to be initially shown instead, just
remove the display:none from the div's style attribute.

also, if the source of your cfwindow is always the same, instead of
using ColdFusion.navigate() to load the page in your cfwindow, consider
defining SOURCE attribute in <cfwindow> tag instead.

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Oct 02, 2008

Thanks for the response Azadi! You are almost to the point I need.

What I'm trying to accomplish in the detailTest.cfm file is to have a DIV holds my 'please wait, loading..' message. It is defined as visible via setting the style display='').

The second div would have display='none' to hide it; this is where the slow data calcs take time.

When the events in the second div are complete, I want to be able to call a js function to make DIV1 (please wait) hidden and DIV2 (form data) visible.

However, I can only get this to work in an anchor that someone must click. I need the event to happen automatically as soon as DIV2 (data) is done loading.

I've tried putting the js in-line in the cfwindow source and also importing it from a separate file, but I either get errors or the visibility toggles don't work.

Here is a code outline:

test.cfm page (calling page)
===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<script>
ShowHideDiv = function(el){
var theDiv = document.getElementById(el);
(theDiv.style.display == 'none') ? theDiv.style.display = '' :
theDiv.style.display = 'none';
}
</script>
</head>
<body>

<p>this is the calling page</p>

<cfwindow name="mywindow" center="true" closable="true" draggable="true"
height="300" width="300" title="My Window" initshow="false" />

<A HREF="javaScript:ColdFusion.navigate('detailTest.cfm',
'mywindow');ColdFusion.Window.show('mywindow');
" >click to test</a>
</body>
</html>

detailTest.cfm (cfwindow's source page)
======================
<p>this is a cfwindow</p>
<div id="divBusy" style="border: 1px solid black; display:block;">
Please wait while the page loads...
</div>
<cfflush>

<div id="divData" style="border: 1px solid black; display:none;">
... do lots of queries here that take about 5 seconds...
</div>



<script language="JavaScript" type="text/javascript">
ShowHideDiv('divBusy'); // this hides the busy div
ShowHideDiv('divData'); // this shows the data div
</script>

Hope this makes sense. i've spent 2 days on this, which just seems silly. I mean, there has to be a way to do this...

Your support is eternally appreciated. I hope this will describe the problem in better detail so you can see where I am stuck.

Report · Oct 02, 2008

aren't you unnecessarily complicating things?

CF already provides this functionality in ColdFusion.navigate() and
other Ajax functions: it will display the "Loading..." indicator in your
cfwindow until the window's source is fully loaded.

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/