Hello, I have a window.open-based popup that includes a colorpicker (its just a ray of small colored boxes that the user can select). Once the user selects the color, I insert the HEX code into a hidden field in the parent (using window.opener.document.getelementbyid) and I close the popup. Now..I have to call a JavaScript function which is defined in the parent window. How can I do that once the popup has closed? Thanks!
i think it is much easier to define the methods of the function inside the pop-up window's function - just call out all your code before you call out the window.close()/self.close() line of code. however, if you MUST define the function from the parent window, then you need to do a little trick that i discovered. you can elaborate on this as much as you want. for illustration's sake, pick an element, say a input text field with an id of "newText" and let THAT trigger your wanted function once focus is on it ( onfocus="myParentFuction()" ) a sample is posted here: demetri-media.com/JavaScript/popUp.html code for the parent page is: <head> <script type="text/javascript"> var cNum=0; function opensColorPicker() { window.open("pop.html","_blank","width=100, height=100"); cNum+=1; } function myParentFuction(){ if(cNum==1){ document.getElementById("newText").style.borderStyle="solid"; document.getElementById("newText").style.borderWidth="15px" document.getElementById("newText").style.borderColor="red" } } </script> </head> <body> <input type="button" id="btn" value="Open Color Picker" onclick="opensColorPicker()" /> <div><input type="text" id="newText" onfocus="myParentFuction()" value="this text should change"/></div> </body> Code (markup): and for the pop-up page "pop.html" : <head> <script type="text/javascript"> function getInfo(color){ opener.document.getElementById("newText").value=color; opener.document.getElementById("newText").style.backgroundColor="yellow"; opener.document.getElementById("newText").focus(); self.close(); return false; } </script> </head> <body> <select onchange="return getInfo(this.options[this.selectedIndex].value)"> <option value="">pick color</option> <option value="red">RED</option> <option value="blue">BLUE</option> <option value="green">GREEN</option> <option value="orange">ORANGE</option> </select> </body> Code (markup): i used a select box in the pop-up for the 'color picker'. there is a variable declared in the parent which just helps the function not be triggered until the pop-up window is actually opened. of course if someone opens the pop-up window, and goes back to the parent before clicking in the pop-up AND puts focus on that text box, then the function will trigger too. you can work out some limits if that is a problem. anyway, i hope this makes sense, and you can see how you can apply this to make it work for you. if you don't understand it, just ask.