Return value from PopUp to parent - javascript

I have a difficult question and don't know if this is possible:
I have a link on my parent window that opens a popup with a webpage: forum.website.com. This webpage is a page with a forum where an user can post a new topic. He type the subject and the content, and submits the topic. The url is now: forum.website.com?board=1&topic=X where the X is the unique id. Now this ID should be sent to the parent window, so it knows the id of the new generated topic. How can I do this with javascript?
Thanks!

Use sessionStorage for solving this:
http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/

Parent / source window code:
var storedData;
function setData(id){
storedData = id;
}
Popup code:
function topicPosted(id){
opener.setData(id);
// Do stuff
}
When you close a popup in IE, the data assigned to the opener's object by the popup is lost. That's why you need to call a function from from the popup to the opener, with the data as parameters. The function then sets (copies) the data to variables in the opener.
If it weren't for IE, you might have simply done this:
function topicPosted(id){
opener.storedData = id;
// Do stuff
}

Related

Manage multiple Popups

I need help in managing multiple named popups created via window.open(). There are multiple popups all with a unique ID and my application requires some popups be reloaded after an ajax success in the parent window.
var myWindow = window.open("_url", uniqueId, "other params...")
if I create a single popup, it can be reloaded by calling myWindow.location.reload(). However, I am not sure how it can be done as the reference to the current popup in myWindow object gets updated everytime a new popUp is opened.
I was thinking of maybe creating a global javascript map with window.open references in it.
something like:
var myWindowArray = [];
myWindowArray[uniqueId] = window.open("_url", uniqueId, "other params...");
and later reload this popup by calling myWindowArray[uniqueId].location.reload().
I am not sure if this will work or if there is a better method for managing such circumstances.
Thanks in advance
The following is what you are looking for
var dict = {};
dict["MY_FIRST_WINDOW"] = window.open("_url", "MY_FIRST_WINDOW", "other params...");
dict["MY_FIRST_WINDOW"].location.reload();
but you say I am not sure if this will work, and that is a problem. You should always try things on your own first before asking.

Passing an object from knockout to opener window

I have the following scenario in my site, a page (opener) can open a "Settings" page, where you can change settings, save and close in order to continue in the opener page.
The problem is that right now the settings aren't passed along from the settings page to the opener page.
So I added this in the saveSettings function:
saveSettings: function () {
var jsonObj = ko.mapping.toJSON(this.ViewModel);
SD.CORP.WS.HedgingEffectivenessSettingsService.SetHedgingEffectivenessSettings(userID, companyID, selectedProductID, jsonObj, saveSettingsOnSucc, saveSettingsOnFaild);
This is an example of what I've added:
var settings = JSON.parse(jsonObj);
window.opener.requestParameters.ReportSetting.ProspectiveTestSettings = settings.ProspectiveTestSettings;
}
But when I try to use it on the opener these objects are empty, if I try to JSON.stringify the object I get a "The interface is unknown" error.
How can I fix this?
EDIT:
I found out in the meanwhile that the actual problem was that I assigned an object from the settings window to the opener window, so when I closed the settings window, the object no longer existed.
I fixed it by adding a function on the opener script so that I can call it from the settings page and then use $.extend in order to create a deep copy on the opener page.
You can try to use window.postMessage to send the settings from the settings window to the opener. Article on how to use: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
Opener:
window.addEventListner('message', function(event) {
var settings = JSON.parse(event.data)
}, false);
Settings window:
window.postMessage(JSON.stringify(jsonObj));

Writing html to a new window with javascript

I have been doing some research on opening a new window and writting HTML to it with jQuery/JavaScript and it seems like the proper way to do it is to:
Create a variable for the new window
var w = window.open();
Insert the new data and work the variable
$(w.document.body).html(data);
And to me, that makes complete sense. however when i try to incorporate this into my script ("data" being the holder for the HTML) it does not open a new window... unless I'm just missing something simple which as far as I can tell it looks great...
function newmore(str) {
var identifier = 4;
//get the history
$.post("ajaxQuery.php", {
identifier : identifier,
vanid : str
},
//ajax query
function(data) {
//response is here
var w = window.open();
$(w.document.body).html(data);
});//end ajax
}
Any ideas?
P.S. there seems to be no errors in the console
Your new window is probably being blocked by the popup blocker built into most browsers. If you create the new window as a direct result of a user action (key, click), then the browser usually will not block it. But, if you wait until sometime later (like after an ajax call completes), then it will get blocked and that is probably what is happening in your case.
So, the fix is usually to create the window immediately in direct response to the user event (don't wait until the ajax call completes), keep the window handle in a variable and then put the content in the window later after your ajax call completes.
function newmore(str){
var identifier = 4;
// create window immediately so it won't be blocked by popup blocker
var w = window.open();
//get the history
$.post("ajaxQuery.php", {
identifier : identifier,
vanid : str
},
//ajax query
function(data) {
//response is here
$(w.document.body).html(data);
});//end ajax
}
Try instead:
var w = window.open();
w.document.write(data);
The "innerHTML" property of the document object (which is what jQuery's .html() uses) represents the HTML document, which a new window doesn't have. Even if it did, putting a complete document inside an HTML document doesn't really make sense. It's a freshly-created document, so you can just write to it.
This peace of code will work:
var data = "<h1>Test</h1>";
var w = window.open("", "mywindow1", "width=350,height=150");
$(w.document.body).html(data);
You have to inform some parameters when opening new windows.
But, if possible, I'd hardly recommend that you use another way like, jquery UI or Twitter Bootstrap for doing that, so you will not be using pop-ups.

Popup window accessing parent dom

I have a popup window that needs to access the parent dom to generate a print page. The structure of the print page is significantly different then the structure of the parent so a print css would not solve the problem. I basically want to popup a window and then have that window grab some data from the parent of even access the dom from the popup and generate the print page without having to go to the server again. Any ideas how i can achieve this?
Im using the standard
window.open()
to pop up a window. I need this solution to not be a hack and be cross browser compatible with all major browsers.
Thanks in advance!
Sajjan's answer is a start, but better make sure your objects are available before you try to access them:
var opener = window.opener;
if(opener) {
var oDom = opener.document;
var elem = oDom.getElementById("your element");
if (elem) {
var val = elem.value;
}
}
Otherwise, you do run the risk that the opener doesn't respond to your initial call, and that you can't get the element from it.
As jQuery, I think (based on an answer, here: how to access parent window object using jquery?):
var opener = window.opener;
if(opener) {
var elem = opener.$("#elementId");
if (elem) {
var val = elem.val(); // I forgot we're dealing with a jQuery obj at this point
}
}
window.opener.document.getElementById("your element").value
According to MDN, window.open() will return you a handle to the new window.
var popUpHandle = window.open();
With this handle you should be able to access the DOM of the PopUp. It is possible vice-versa using the already mentioned window.opener. Refer again to MDN:
var originalWindow = window.opener;
Still, your favorite search engine will provide you more details, as this is topic is fairly old and your approach has already been done a million times or more.
parent.document helped in my case.
var elem = parent.document.getElementById("overlay_modal");
if (elem) {
alert('setting attribute');
elem.setAttribute("onclick", "Windows.close('2', event);");
}

How to redirect main window to URL from popup?

I have a pop-up window with a form in it. On submit of the form, I wish to redirect to a particular page, but on the parent window (not on the popup).
How can I achieve this using Javascript?
After Application of Josh Idea
I am calling a javascript function to submit a form, in this javascript, below is the mentioned code
So Can this be executed as i tried with this and its not working as per my need
function instant_popup_post()
{
var cid = document.getElementById('product').value;
var session_id = document.getElementById('sessid').value;
if(cid==30)
{
alert(document.getElementById('instantpop').onsubmit="opener.location.href = 'http://192.168.1.5/cppl11/bannerbuzznew/full_color_banner.php?&id=+cid+'&info_id=5&osCsid='+session_id;");
document.instantpop.submit();
}
else if(cid==31)
{
document.getElementById('instantpop').onsubmit="opener.location.href ='perforated_window_signs.php?&id='+cid+'&info_id=6&osCsid='+session_id;";
document.instantpop.submit();
}
else if(cid==32)
{
document.getElementById('instantpop').onsubmit="opener.location.href ='preprinted_stock_banner.php?&id='+cid+'&info_id=7&osCsid='+session_id;";
document.instantpop.submit();
}
}
plss help
From within the popup, you can use the opener property to reference the parent window...
opener.location.href = 'http://www.google.com';
You can also invoke functions on the parent window...
opener.functionName();
Of course, the good old same origin policy restrictions apply here
I would say to use showModalDialog, so you will be freezing the parent window, and after it is done, you can send a variable to parent and do the redirect:
MainWindow:
function ShowModalForm()
{
var urlToRedirect = window.showModalDialog('url');
if (urlToRedirect)
window.location = urlToRedirect;
}
Popup Window:
function buttonAcceptClicked()
{
//Do stuff you need
window.returnValue = "new url";
window.close()
}
Here is a lot of information about this.

Categories