Communicating with a pop-up's parent
Launching "pop-up" windows from the browser is fairly easy, assuming we all know about the window.open method. What do you do when you want to get some data from the new window back to the old one? We use the window.opener property of the pop-up don't we!?
window.opener creates an object reference to the window (or frame) that called window.open() in order to create the current window. We can use this to gain access to objects on the original document and alter them accordingly. Here's how:
On the original form create a link/button/action that launches a new window.
In the form that is being opened we need a link that will send information back:
<input type="button" value="Send Colour" onClick="window.opener.document.forms['test'].MyFavouriteColour.value = this.form.Colour.value; window.close();">
And now what would this amount to without an example?
Colour:
In the above example I've used the onChange event handler of the drop-down list to call a function which returns the value and closes the window.
Pop-up performance
I think this is an important side-note for using pop-ups, although it will be obvious to some.
When I first began creating pop-up windows, I used a form to create the pop-up because I needed to do some lookups to populate fields in the pop-up. Of course, this requires an additional request to the server and processing time.
Now, I put my lookups on the main form and create the pop-up by constructing the HTML, complete with JS functions, on the fly via JavaScript avoiding additional server hits until the form is actually submitted.
The JavaScript function can be a little hairy since HTML syntax can be difficult enough by itself. More tips to make this easier: 1. Use linked resources such as CSS sheets and JavaScript source files. 2. Create the pop-up in the HTML editor of your choice, cut-n-paste the HTML into the JavaScript routine, and, finally, add any additional script that you will need to generate drop-down lists, checkbox lists, etc.
Reply
Pop ups
I agree with Jeffery.
I'm using popup's to select user names (thousands of the buggers) and have found the solution to load the lists into a hidden frame and then reference them. The frame loads quietly in the background and users are not aware it's happening.
This solution gives some dramatic time savings, no extra requests to the server and no server doing huge lookups.
Also. IE (not sure about Netscape) has a problem in that a SELECT can only have 2500 OPTIONS.
All in all exciting times .....
Reply
Using Opener
There seem to be some issues with using Opener, I've got a piece of code that works perfectly under IE4 and Netscape but doesn't work under IE5, apparently the issue is to do with the 'settle' time required by IE5 before trying to communicate with a child window. Anybody got any more information on this ?
Reply
Re: Using Opener
This method does not work on IE version 5.5. I believe that there is a timing issue, because, the recieving field in the parent document goes blank. In addition, if you add a test field on the popup with the same name as the receiving field on the parent, it will be populated with the selected value from the dialog list.
Any other ideas.
Reply
How to run a function on closing the popup?
I want this popup to run a function when it returns to the browser, as opposed to inserting a value in a field. Is this possible?
Reply
Re: How to run a function on closing the popup?
First of all, I'm not talking about modal windows, opened with showModalDialog(), but those opened with window.open().
In the parent window, create a handle to the function you want to call on exit, e.g.
[<br clear="all" /><code> exitFunction = myExitFunction; </code>]
In the popup, you can reference that function as follows:-
[<code> //...get a pointer to the exit function we will invoke... exitFuncName = window.opener.exitFunction; exitFunc = window.opener.document.forms[0][exitFuncName]; </code>]
Then you can call it as part of the function that closes the popup window. This might be when the user clicks the OK button, for example.
[<code> function okClick() { ....... if ( exitFuncName != '' ) { eval('window.opener.' + exitFuncName); } ....... } </code>]
Note that we check if we have a handle to a function (well, to something anyway) before we try to run it.
This technique dates back to Netscape 3.x and IE4.x. The only problems I have had are with a particular version of IE5.0x, which are security related.
Reply
Show the rest of this thread
Good stuff
Appreciate this how-to...haven't done anything in javascript in quite some time and this came in very handy.
Thanks again.
Reply
nice job
how is it that you only give one file for downloading in the example.. I have downloaded your webpage anyways... and fixed up all the names and it still doesn't work.. even the examples that you give are very unclear.. one would think that you would make available ALL source files not just the new_window.html
Reply
Re: nice job
That file is there merely for the demo and is not really meant as a "download". However you can download this page and the source of the article if you need to work on it from your own PC.
Reply
Communicating with a pop-up's parent
It doesnot work,when the pop up is opened and the color is changed it gives me error
Reply
need help for Communicating with a pop-up's parent
window.opener.document.forms['test'].MyFavouriteColour.value = this.form.Colour.value; window.close() Thanks for this article and i want some more.
Can we load a parent dropdownlist with this code. can you please send me the code for this PLEASE.
Reply
Error
Hi Jakes,
When I run the code(on this webpage) I get an run time error on line 7.
REgards,
J
PS Using IE6.1
Reply
Re: Error
Fixed. Thanks for the prompt to sort it out.
Reply
thanks
too gud
Reply
Frames
How is the field value referenced if the field is in a frame inside a frameset?
Reply
Re: Frames
When using window.open(...) from within a frame, to set the value of 'fieldname' on the underlying form, use:
window.opener.parent.frames['FrameName'].document.getElementById('fieldname').va lue = 'whatever value';
This seems to work for IE, Firefox, Netscape, and safari.
Reply
Feedback about this site
It is a really wonderful site. Because i had been strucking up with this functionality since past 2 days. Thanks guys. And one more query, Suppose if i use Master/Content page of .NET version 2.0, what will come instead of forms(document.forms)
Reply
run codebehind function from pop up
hello, i would like to ask, 1.Is it possible to execute some parent codebehind function from popup?
Reply
DOMM-4U4K9B :don't work in R6
Hi Jake: Do you know?...I was trying your code in Lotus R6.5 and it doesn't work....I don't know why?...but it does work when I run your code with DreamWeaver editor...........please, Could you tell me How Can I implement in R6.5? Regards, Carlos
Reply
Re: DOMM-4U4K9B :don't work in R6
Carlos,
There's no reason it shouldn't work in 6.5. It's the browser that should dictate whether or not it works.
Jake
Reply
Show the rest of this thread
Thank you!
I've just tried ten different examples of how to accomplish this, none worked! Many gave completely different examples from the source code offered! Basically, a complete waste of 30 minutes!
Then I found this, copy, paste, and it works a charm!! Thank you!!!
Reply
Thank you so much. This script has been saved mine lot of time & effort.
Reply
Re: Only works on editable fields.
For mostly aesthetic reasons I too have a form that needs to be "read-only" with updates occurring through a dialog box. After pulling my hair out for 2 days I realized there was a simple solution.
Set the HTML Attribute of the field on the calling (main) form to "DISABLED". The field will retain its programmability, the caveat is it will also be "grayed-out". If this is an issue set the HTML attribute to "READONLY" and set the field's border = 0 (in the html style or via a CSS). Read only prevents the user from changing the field's value but it leaves the field's border in tact, so the setting the style border = 0 is needed to complete the deception. Both provide you with an HTML equivalent of a computed field.
btw... your modal dialog box was a great help. Thanks
Reply
Show the rest of this thread