Menu
How can I pass some data or call a function on the parent window from a popup window?
The user will click a link which will open a popup on the same website, once he is finished with the popup, I want it to send the new data back to the parent window, or call a function on the parent window.
699
From a child window or a small window once opened, we can transfer any user entered value to main or parent window by using JavaScript. You can see the demo of this here. Here the parent window is known as opener. So the value we enter in a child window we can pass to main by using opener.
Click the Open / Swap radio button. Under Window, use the dropdown list to select the path to your Popup Window (i.e.,Popup_Param_Test). Check the Pass Parameters check box, and click the Add icon to add a parameter. Click the new row under Parameter Name and a dropdown list will appear.
Typically the onclick event on the "Yes" or "Ok" button in the modal dialog looks like this: window. returnValue = true; window. close();
The window.opener object is what you're looking for, used it from within your popup like so to call the a function of the parent window:
window.opener.yourFunc() Here is a fun and easy demo that is heavily inspired by this answer to a similar question (but modified for my own purposes to help investigate the most difficult bug of my career).
Create 2 files (in the same directory) as follows:
parent.html
<button type="button" onclick="popup('popup.html', '', 800, 200);">Add My Card</button> => <span id="retrievedData">No data yet.</span> <script> function popup(url, title, width, height) { var left = (screen.width / 2) - (width / 2); var top = (screen.height / 2) - (height / 2); var options = ''; options += ',width=' + width; options += ',height=' + height; options += ',top=' + top; options += ',left=' + left; return window.open(url, title, options); } function setData(data) { console.log(data); var strData = JSON.stringify(data); document.getElementById('retrievedData').innerHTML = strData; var requestBinUrl = 'http://requestb.in/18u87g81'; window.location.href = requestBinUrl + '?data=' + strData; } </script> popup.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form id="popupForm" name="f"> <select id="urlField" name="url"> <option> http://date.jsontest.com/ </option> <option> http://time.jsontest.com/ </option> <option> http://md5.jsontest.com/?text=HereIsSomeStuff </option> </select> <div><input type="submit" /></div> </form> <script> $('#popupForm').submit(function(e) { e.preventDefault(); var url = $('#urlField').val(); console.log(url); $.ajax({ url: url }).then(function(data) { console.log(JSON.stringify(data)); window.opener.setData(data); window.close(); }); }); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
