Modifying the parent of a closed popup?

@anemicpadreMar 10.2007

Hi,

I would like to assist my users filling out a form with popup selection fields. I’ve a form that calls a popup page and this in turn creates another popup. If I leave the first popup open I can populate the form with this code.

opener.opener.document.userinfo.tidecode.value = document.tidal.tide_location.value;
window.close();

However I’d like to close the first popup as it’s purpose is only to get me to the correct options in the second popup. In the first if I do a window.close right after launching the second..I can no longer populate the originating form. Is there anyway to get to the form field in the original page with the intermediate popup already closed? Or can I get the second popup to save a reference to the parent of the first..and then use it to change the form onSubmit? Thanks, AP

to post a comment

JavaScript

7 Comments(s) _↴

@Mr_JMar 10.2007 — #If you use the same window instead of creating a third you will be able to reference your form

@anemicpadreauthorMar 10.2007 — #Can I resize the window? That's my main thing. I've a web artist who has designed nice graphics so the two windows are not similar in shape. If I can use the same window but change x and y dimension onLoad it would work. Mr. J do you have a wayto do this? AP

@Mr_JMar 10.2007 — #Take a look at this example

www.huntingground.freeserve.co.uk/imagery/img_gal7.htm

@Mr_JMar 10.2007 — #Ignore my previous post could not edit it because some silly 10 minite limit had passed.

You could possibly use resizeTo() and moveTo(), try this example

opener.htm

[CODE]
 <HTML>
 <HEAD>
 <TITLE>Document Title</TITLE>
 
 
 <script type="text/javascript">
 
 myPop=null
 
 function popUp(){
 myPop=window.open("pop1.htm",'pop','left=300,top=100,width=200,height=200')
 myPop.focus()
 }
 
 </script>
 </HEAD>
 <BODY>
 
 <a href="#null" onclick="popUp()">Open Pop 1</a><BR>
 <a href="#null" onclick="myPop.close()">Close Pop</a><BR>
 
 <input type="text" id="put">
 
 </BODY>
 </HTML>[/CODE]

pop1.htm

[CODE]<HTML>
 <HEAD>
 <TITLE>Document Title</TITLE>
 <script type="text/javascript">
 
 function popUp(){
 myPop=window.open("pop2.htm",'pop')
 myPop.resizeTo(400,400)
 myPop.moveTo(300,200)
 }
 
 </script>
 
 </HEAD>
 <BODY>
 <h1>Popup One</h1>
 First <a href="#null" onclick="opener.document.getElementById('put').value='Hello'">Populate textbox</a> in the opener<br><br>
 Then <a href="#null" onclick="popUp()">Open</a> popup 2
 
 </BODY>
 </HTML>[/CODE]

pop2.htm

[CODE]<HTML>
 <HEAD>
 <TITLE>Document Title</TITLE>
 </HEAD>
 <BODY>
 <h1>Popup Two</h1>
 
 <a href="#null" onclick="opener.document.getElementById('put').value='world'">Populate textbox in 1st opener</a>
 
 </BODY>
 </HTML>[/CODE]

@Mr_JMar 10.2007 — #Here's another option, you use the same popup but load a new page and move and resize the popup

opener.htm

[CODE]<HTML>
 <HEAD>
 <TITLE>Document Title</TITLE>
 
 <script type="text/javascript">
 
 myPop=null
 
 function openWindow(url,Left,Top,Width,Height){
 
 if(myPop&&myPop.open&&!myPop.closed){
 myPop.resizeTo(Width,Height)
 myPop.moveTo(Left,Top)
 myPop.location=url
 }
 else{
 myPop=open(url,'pop','left='+Left+',top='+Top+',width='+Width+',height='+Height+'' )
 }
 }
 
 </script>
 </HEAD>
 <BODY>
 <a href="pop1.htm" onclick="openWindow(this.href,100,100,400,200);return false">Popup 1</a>
 
 <a href="#null" onclick="myPop.close()">Close Pop</a><BR>
 
 <input type="text" id="put">
 
 
 </BODY>
 </HTML>[/CODE]

pop1.htm

[CODE]<HTML>
 <HEAD>
 <TITLE>Document Title</TITLE>
 </HEAD>
 <BODY>
 <h1>Popup One</h1>
 
 <a href="pop2.htm" onclick="opener.openWindow(this.href,400,100,200,400,'toolbar=no,location=no');return false">Popup 2</a>
 
 </BODY>
 </HTML>[/CODE]

pop2.htm

[CODE]<HTML>
 <HEAD>
 <TITLE>Document Title</TITLE>
 </HEAD>
 <BODY>
 <h1>Popup Two</h1>
 
 <a href="#null" onclick="opener.document.getElementById('put').value='Hello World'">Populate textbox in 1st opener</a>
 
 </BODY>
 </HTML>[/CODE]

@anemicpadreauthorMar 10.2007 — #Mr J,

Thanks. I tried your code. It worked in Opera/IE but not Firefox 1.5.0.10. I had already found the self.resizeTo and changed my code to resize. I have my first popup drawn with my links containing an iframe .. the contents of which looks like this

[code=html]
 <html>
 <body>
 <p><a onClick='javascript:parent.resizeTo(x,y)' href="form_150.htm"></a></p>
 </body>
 </html>
 [/code]

The form_150.htm file looks like

[code=html]<html>
 SNIP
 <script type="text/javascript">
 function SetTideLocation() {
 opener.opener.document.userinfo.tidecode.value = document.tidal.tide_location.value;
 window.close(); }
 </script>
 SNIP
 <form name="tidal" onSubmit="SetTideLocation();">
 <select style="font-size:11px; font-face:Arial Narrow;"  name="tide_location">
 <option selected value="">Select a tide location.</option>
 <option value="3.html">Absecon Channel, State Route 87 bridge &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <!-- 1000 options deleted -->
 </form></html>[/code]

It's unclear to me how to change the opener.opener.document context to reference the field in the original form. The parent of the iframe is the popup right? The parent.resizeTo changes the window appropriately. But I cannot seem to populate the parent form after adding the iframe. Thanks.

@Mr_JMar 11.2007 — #Can you post a url so I can see the exact code for all the pages involved

Also in #JavaScript _↴

whats wrong in the function Need help with a "Facebook" script :-)Firefox Firebug and Jquery

Success!

Help @anemicpadre spread the word by sharing this article on Twitter...

Tweet This

Modifying the parent of a closed popup?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Modifying the parent of a closed popup?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴