Solved

How to force a close child before accessing parent window - a modal window

Posted on 2008-10-27
21
594 Views
Last Modified: 2011-10-19
I thought this one was easy.  I added :

<body onBlur="window.focus()">

to the program opening in the child window.  I thought this would force the user to close the child window before being able to access the parent again.  It's not working in FF and I don't much care about IE as this intranet is for FF only.

I know for a fact this can be done.  What am I missing here?

TIA
Owen
0
Comment
Question by:owenparker
  • 14
  • 7
21 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22818113
On the main/parent window, do you have a reference to the child window? IF yes, then use that to dectect if the child window is opened:
var child = window.open('...','child','...');
function handleChild(){
 if( !child.closed )
  child.close();
}

0
 

Author Comment

by:owenparker
ID: 22818660
Hi hielo

I don't think it is that simple or that that method will work.  I have oin a page a number of buttons.  The code is as included.  The user will click a button, and a child window will open to allow the setup of the details for that button. This screen is a setup fucntion for the buttons that will be used in another 'program'.

I don't want the user to be able to get back to the parent screen until he has saved or cancelled the child window via one of two buttons included on it to do one or the other.  

Can I do something from this sort of setup?  I do not see how I could use the method you described unless I had a popup function for each.  I could maybe pass a unique 'window name' to the pop up function perhaps.  I tried this, but couldn;t seem to get the syntax correct.  Maybe that's where my problem lies.


Code snippet for group of buttons, each of which opens a 'popup' window getting details for the button.  
 

         print "<div id=\"catpg1\">";

         print "<div id=\"catbuttons\">";

         while ( $row = mysql_fetch_array($loadmenucat1) ) {

            $mccatno                = $row[catno];

            $mccategory_name        = addslashes($row[category_name]);

            $mcmgrpidno             = $row[mgrpidno];

            $mcbtn_color            = $row[btn_color];

            $mcbtn_picture_filename = $row[btn_picture_filename] ;
 

            if ($browctr==1) {

               print "<div class=\"catbtnrow\">";

            }

            print "   <div onclick=\"javascript:popUpaedcat('editcat.php?chkcatno=$mccatno')\" class=\"bdbl\" style=\"color:black;background-color:#" . $mcbtn_color . ";\">" . $mccategory_name . "</div>";

            $browctr++;

            if ($browctr==3) {

               print "</div>";

               $browctr=1;

            }

         }

         print "Page 1</div></div>";
 
 

Function to open window:
 

<script type="text/javascript">

   function popUpaedcat(URL) {

      day = new Date();

      id = day.getTime();

      eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80');");

   }

</script>

Open in new window

0
 

Author Comment

by:owenparker
ID: 22818698
In trying to explain clearer, I want to open a window and set the focus to it.  I want this to remain the windo in focus until the user presses a button to save or a button to cancel/exit.  
0
 
LVL 82

Expert Comment

by:hielo
ID: 22818743
this:
<body onfocus="handleChild()">
 

was meant for the parent window. If you want the user to specifically close the window, then instead of:

function handleChild(){

 if( !child.closed )

  child.close();

}
 
 

try:

function handleChild(){

 if( !child.closed )

  child.focus();

}

Open in new window

0
 

Author Comment

by:owenparker
ID: 22818799
That makes sense.

I have been trying to weave your suggestion in.  Close but no cigar so far.

Problem now is that Handlechild can't 'see' child because it is set in the function popupaedcat.

Tried taking the function that opens the window out of it by calling the window.open in the onclick.  Same result, child is not defined and it isn't working...

   function popUpaedcat(URL) {

      var child = window.open(URL, 'child', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80');

   }
 

   function handleChild(){

    if( !child.closed )

     child.focus();

   }
 

In the calling program:
 

Changted the body tag:
 

<BODY onfocus="handleChild()" onLoad="show_clock()">
 
 

Onclick code calling window.open:
 

            print "   <div onclick=\"javascript:var child = window.open('editcat.php?chkcatno=$mccatno', 'child', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80')\" class=\"bdbl\" style=\"color:black;background-color:#" . $mcbtn_color . ";\">" . $mccategory_name . "</div>";

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22818869
instead of:
var child =...

simply use:
child=...

OR
window.child=...
0
 

Author Comment

by:owenparker
ID: 22818927
Hi Hielo

Thanks for not abandoning me.  :)

Upon loading, the parent program reports an error, child undefined.  The popup works and I can click one time off it and it stays on top.  But when i click the second time off it, it loses focus.  

I don't think this can work for onclick because the handlechild() function will always report child as undefined unless the window is opened upon starting the program.

Is this a safe assumption?

Somehow, with an onclick even, I need to open a popup with focus, and keep focus on it until a button is clicked.  In my fiddling, I have ended up with the code attached.  Maybe I have made an error as per usual...

Please advise...
Parent window:
 

<BODY onfocus="handleChild()">

...
 

         $browctr = 1;

         print "<div id=\"catpg1\">";

         print "<div id=\"catbuttons\">";

         while ( $row = mysql_fetch_array($loadmenucat1) ) {

            $mccatno                = $row[catno];

            $mccategory_name        = addslashes($row[category_name]);

            $mcmgrpidno             = $row[mgrpidno];

            $mcbtn_color            = $row[btn_color];

            $mcbtn_picture_filename = $row[btn_picture_filename] ;
 

            if ($browctr==1) {

               print "<div class=\"catbtnrow\">";

            }
 

            print "   <div onclick=\"javascript:child = window.open('editcat.php?chkcatno=$mccatno', 'child', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80')\" class=\"bdbl\" style=\"color:black;background-color:#" . $mcbtn_color . ";\">" . $mccategory_name . "</div>";
 

            $browctr++;

            if ($browctr==3) {

               print "</div>";

               $browctr=1;

            }

         }

         print "</div></div>";

...
 

<script type="text/javascript">

   function handleChild(){

    if( !child.closed )

     child.focus();

   }

</script>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22818948
try:
Parent window:

<head>

<script type="text/javascript">

var child = null;

</script>

</head>

<BODY onfocus="handleChild()">

...

 

         $browctr = 1;

         print "<div id=\"catpg1\">";

         print "<div id=\"catbuttons\">";

         while ( $row = mysql_fetch_array($loadmenucat1) ) {

            $mccatno                = $row[catno];

            $mccategory_name        = addslashes($row[category_name]);

            $mcmgrpidno             = $row[mgrpidno];

            $mcbtn_color            = $row[btn_color];

            $mcbtn_picture_filename = $row[btn_picture_filename] ;

 

            if ($browctr==1) {

               print "<div class=\"catbtnrow\">";

            }

 

            print "   <div onclick=\"javascript:child = window.open('editcat.php?chkcatno=$mccatno', 'child', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80')\" class=\"bdbl\" style=\"color:black;background-color:#" . $mcbtn_color . ";\">" . $mccategory_name . "</div>";

 

            $browctr++;

            if ($browctr==3) {

               print "</div>";

               $browctr=1;

            }

         }

         print "</div></div>";

...

 

<script type="text/javascript">

   function handleChild(){

    if( child !== null && !child.closed )

     child.focus();

   }

</script>

Open in new window

0
 

Author Comment

by:owenparker
ID: 22819222
No longer is there an error reported, but the focus is only set for one click on the parent.  The second click still changes focus to the parent.

I added an alert to the handlechild function:

   function handleChild(){
    if( child !== null && !child.closed )
      alert('child ' + child + '.');
     child.focus();
   }

When I click on the parent the first time, child is reported as [window object].  The function then gets stuck in a loop.  Does this behavior tell you anything?

So close...
0
 

Author Comment

by:owenparker
ID: 22819228
I just realized that the alert itself is drawing focus.  not such a good test :)
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:owenparker
ID: 22819237
If I ALt-TAb the child back into focus, it always stays in focus till the second click.  It certainly isn't closed and it's not NULL so I can't fugure out how it is not staying in focus when clicking the parent???
0
 

Author Comment

by:owenparker
ID: 22825892
I think I may have lost you now Hielo, but in case not or maybe someone else takes a look, I made a test parent.php and testchild.php to better illustrate what I am doing and to allow you to see how the code you suggested is implemented in case of errors...

HTH
Owen

testparent.txt
testchild.txt
0
 

Author Comment

by:owenparker
ID: 22828150
For the record, the sample attached works perfect in IE7 but not at all in FF.
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22828764
try this for the parent:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>

   <title>Test Parent-Child Window Focus</title>
 

   <style type="text/css">

      #orderbox {

         position: absolute;

         top: 0px;

         left: 0px;

         padding: 0px;

         width: 1024px;

         height: 768px;

         border: solid 1px blue;

      }
 

      #catpg1 {

         position: absolute;

         /*

         top: 81px;

         left: 0px;

         */

         overflow: hidden;

         width: 157px;

         margin: 90px 50px;      /*  top margin  */

         height: 580px;

         border: 0px #030 outset;

         text-align: center;

         font-family:Arial,Helvetica,Verdana,Sans-Serif,Serif;

         font-size: 18px;

         font-weight: bold;

         color: #000000;

      }
 

      #catbuttons {

         float: left;

         overflow: hidden;

         line-height: 1em;

         height: 585px;

         border: solid 0px blue;

      }
 

      .catbtnrow { clear: both; }
 

      .catbtnrow div {

         border: 4px #030 outset;

         float: left;

         line-height:90%;

         height: 30px;

         width: 70px;

         margin: 0px 0px 0px 0px;

         padding: 15px 0px 0px 0px;

         text-align: center;

         vertical-align: middle;

         cursor: pointer;

         font-family:Arial,Helvetica,Verdana,Sans-Serif,Serif;

         font-size: 12px;

         font-weight: normal;

      }
 

      .catbtnrow div.bdbl {

         width: 70px;

         margin-left: auto;

         margin-right: auto;

         margin-top: auto;

         margin-bottom: auto;

      }
 

      .catbtnrow div.bdbl:hover{

         border-style: inset;

         font-family:Arial,Helvetica,Verdana,Sans-Serif,Serif;

         font-size: 12px;

         font-weight: normal;

      }
 

   </style>
 

<script type="text/javascript">

child = null;

function handleChild()

{

	if( child !== null && !child.closed)

	{

	 	  self.blur();

      	  child.focus();

 	}

}
 

</script>
 
 

</head>
 

<BODY onfocus="handleChild()">

   <div id="orderbox">

      <div id="catpg1">

         <div id="catbuttons">

            <div class="catbtnrow">

               <div onclick="javascript:child = window.open('testchild.php?chkcatno=3', 'child', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80')" class="bdbl" style="color:#000000;background-color:#FFFFFF;">Test 1</div>

               <div onclick="javascript:child = window.open('testchild.php?chkcatno=4', 'child', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 112,top = 80')" class="bdbl" style="color:#FFFFFF;background-color:#000000;">Test 2</div>
 

            </div>

         </div>

      </div>

   </div>

</body>

</html>

Open in new window

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 500 total points
ID: 22828770
If that still does not produce the result you want, try adding this to the child page:
<body onblur="self.focus();">

Open in new window

0
 

Author Comment

by:owenparker
ID: 22832860
Ok, this works for the first click.  A step in the right direction.  But the second click on the parent returns it to focus.  How I can;t imagine.  I did some research and there seems to be an issue with FF and the focus() method.  A proposed fix is to use the settimeout() but I couldn't get it to work any differently.  Does this ring any bells with you?  And thank a mil' for coming back to this.  I thought this was an easy one, but as usual, it doesn't seem to be...

I included the updated program files for your perusal and testing...
testparent.txt
testchild.txt
0
 
LVL 82

Expert Comment

by:hielo
ID: 22833748
>>Ok, this works for the first click.
I keep clicking on the parent window and it keeps focusing the child (Using FF2.x)

as for:
"... A proposed fix is to use the settimeout() "

why zero?! Try an actual delay that the system can "see":
setTimeout("tchild.focus();",10);
0
 

Author Comment

by:owenparker
ID: 22835633
I'm using 2.0.0.17 and I cannot get more than one click.  I actually set the settimeout to a million (10000000) and it made no difference whatsoever, whihc has to be telling in some way.  I understand the code, but I cannot understand why it is not working. it's just not logical.  

And yours i\s working.  I simply must know why :)

I have disbled all addons except web developer but I have always had that.

I always get it for only one click.  I can;t figure out how to check anything without messing with the focus so I can;t understand what is changing between click one and click two that switches focus to parent, completely disregarding the parent body onfocus directive and the child body onblur directive

stumped and irritated
Owen
0
 

Author Comment

by:owenparker
ID: 22835839
I installed ff 3.0.3 and same thing.  ???
0
 

Author Comment

by:owenparker
ID: 22837528
Got this working.  My code did not match your latest version.  Soon as it did voila.  Nice job Hielo.  As per usual.  Always a pleasure getting therte with you

Owen
0
 

Author Closing Comment

by:owenparker
ID: 31510583
The man does great work!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now