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>

WebAppDeveloperAsked:
Who is Participating?
 
azadisaryevConnect With a Mentor Commented:
here are the changes you need to make:

1) remove all js from your MyModalWindowTemplate.cfm.
first, this page is displayed in a cfwindow (which is just a floated div), and thus has access to all js in your 'main' page - so there's no need to include jquery library again.
second, $(document).ready() event will, unfortunately, not fire in a page loaded in cfwindow.

2) add this js function to the <head> section of your MAIN page:
showQTip = function(){
  $('#content2 a[href]').qtip({
    content: {
      prerender: false,
      title: { text: 'Tooltip Title' }
    }
  });
}

the above function will be called after MyModalWindowTemplate.cfm page is loaded into your cfwindow (more on this below)

3) add this line as the last line before the closing </body> tag in your MyModalWindowTemplate.cfm page:
<cfset ajaxonload('showQTip')>

this will call the showQTip() function we added in step 2 after MyModalWindowTemplate.cfm page is loaded in cfwindow.
using ajaxonload() cf function is usually the only way you can run js in pages loaded in cfwindow.

4) now, you will need to edit jquery.qtip-1.0.0-rc3.min.js file:
find this code in it:
x=6000
and change it to:
x=9999

the above is needed because both qTip and cfwindow have hard-coded z-index css property which you can't change at runtime. and cfwindow has its initial z-index set at 9000, while qTip has it set at 6000 - thus qTips will be hidden behind the cfwindow. changing x=6000 to x=9999 in the source code of qTip makes its initial z-index higher than cfwindow's - now the qTips will display over cfwindow content.

Azadi
0
 
WebAppDeveloperAuthor Commented:
Awesome, you are a genious.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.