Skip to main content
A
Anonymous
October 2, 2008
Question

Show/Hide DIV inside CFWINDOW?

  • October 2, 2008
  • 5 replies
  • 2164 views
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
    This topic has been closed for replies.

    5 replies

    N
    Newsgroup_User
    Inspiring
    October 3, 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/
    A
    Anonymous
    October 3, 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>

    <!--- ===========
    now i want to ***automatically*** toggle the visibility of both forms so that divBusy is hidden and divData is visible. Here's what I have tried, but with no luck - js errors. An anchor works fine, but I don't have any events to trigger this off of. i need to execute it in-line with the page rendoring.
    ==============--->

    <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.
    N
    Newsgroup_User
    Inspiring
    October 3, 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/
    A
    Anonymous
    October 2, 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>
    N
    Newsgroup_User
    Inspiring
    October 2, 2008
    <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="true">
    <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>
    </cfwindow>

    Azadi Saryev
    Sabai-dee.com
    http://www.sabai-dee.com/
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices