asked on

URGENT: onload event NOT working in window created by CFWINDOW - Need Help....

Hi,

Can anybody please tell me why the body "onload" event handler is not working in a modal window created by cfwindow? I have a Tooltip feature created by the jQuery QTip pluggin (please see code below) that only works in the main window. Once I implement the same Tooltip code in the modal window (created by cfwindow), the Tooltip doesn't work in the modal window. Can someone please tell me what I did wrong? Thank you very much in advance.

Main Window 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<title>Testing JQuery Tooltip - qTip</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
      <script type="text/javascript" language="javascript">
            // Create the tooltips only on document load
            $(document).ready(function()
            {
              // Match all link elements with href attributes within the content div
              $('#content a[href]').qtip(
              {
                         content: {
                         prerender: false,
                         title: { text: 'Tooltip Title' }
                         }
              });
            });

            function cleanUpWin() {
                  ColdFusion.Window.destroy('ModalWindow',true);
            }

            function showModalWindow() {
                  // do we have a 'ModalWindow' open?
                  try {
                        ColdFusion.Window.destroy('ModalWindow',true);
                  }
                  catch(e) {}

                  ColdFusion.Window.create('ModalWindow', 'My Modal Window', 'MyModalWindowTemplate.cfm', {x:100, y:100, height:400, width:600, modal:true, closable:true, draggable:true, resizable:false, center:true, refreshOnShow:true});
                  ColdFusion.Window.onHide('ModalWindow', cleanUpWin);
            }
      </script>

</head>

<body>
<div id="content">
      <a href="http://www.yahoo.com" title="Tooltip will show this content 1">Go to Yahoo</a><br>
      <a href="http://www.goole.com" title="Tooltip will show this content 2">Go to Google</a><br>
      <a href="http://www.gmail.com" title="Tooltip will show this content 3">Go to GMail</a><br>
</div>

<cfajaximport tags="cfform,cfwindow" />
<div style="margin:5px 0 0 5px;">[ <a href="javascript:void(0);" onclick="showModalWindow();">Show Modal Window</a> ]</div>
</body>
</html>

MyModalWindowTemplate.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<title>Modal Window</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
      <script type="text/javascript" language="javascript">
            // Create the tooltips only on document load
            $(document).ready(function()
            {
              // Match all link elements with href attributes within the content div
              $('#content2 a[href]').qtip(
              {
                         content: {
                         prerender: false,
                         title: { text: 'Tooltip Title' }
                         }
              });
            });
      </script>

</head>

<body>
<div id="content2">
      <a href="http://www.yahoo.com" title="Tooltip will show this content2 1">Go to Yahoo</a><br>
      <a href="http://www.goole.com" title="Tooltip will show this content2 2">Go to Google</a><br>
      <a href="http://www.gmail.com" title="Tooltip will show this content2 3">Go to GMail</a><br>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

azadisaryev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bobby X

ASKER

Awesome, you are a genious.