• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 629
  • Last Modified:

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

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
owenparker
Asked:
owenparker
  • 14
  • 7
2 Solutions
 
hieloCommented:
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
 
owenparkerAuthor Commented:
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
 
owenparkerAuthor Commented:
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
hieloCommented:
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
 
owenparkerAuthor Commented:
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
 
hieloCommented:
instead of:
var child =...

simply use:
child=...

OR
window.child=...
0
 
owenparkerAuthor Commented:
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
 
hieloCommented:
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
 
owenparkerAuthor Commented:
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
 
owenparkerAuthor Commented:
I just realized that the alert itself is drawing focus.  not such a good test :)
0
 
owenparkerAuthor Commented:
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
 
owenparkerAuthor Commented:
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
 
owenparkerAuthor Commented:
For the record, the sample attached works perfect in IE7 but not at all in FF.
0
 
hieloCommented:
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
 
hieloCommented:
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
 
owenparkerAuthor Commented:
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
 
hieloCommented:
>>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
 
owenparkerAuthor Commented:
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
 
owenparkerAuthor Commented:
I installed ff 3.0.3 and same thing.  ???
0
 
owenparkerAuthor Commented:
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
 
owenparkerAuthor Commented:
The man does great work!
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 14
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now