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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

azadisaryevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WebAppDeveloperAuthor Commented:
Awesome, you are a genious.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.