We Keep Coding

Refresh Parent page on close of pop up window

I have a Parent page in which, I have added a search functionality.
like below
function FunClick(StrPriCaption) {
var StrPriHTML = "";
if (StrPriCaption == 'AdvSearch') {
//document.getElementById('TxtCondition').value = "AdvSearch";
//form1.submit();
var StrPriReturnValue = "";
window.open('FrmInwardHdrAdvanceSearch.aspx', null, 'height=370,width=630,top=0,left=0,resizable=yes,scrollbars=yes');
}
}
And it works perfectly. It opens a pop up window page for me to search for.
But now what I want is, IF I close the pop up,I want to refresh the parent page.
I tried with below code in Child page, but it didn't refreshed the parent page.
function CloseWindow() {
window.close();
window.opener.location.reload();
}
How can I do this using Javascript?

Method 1
<script>
function popup() {
var win = window.open("", "Page Title", "toolbar=no, location=no");
win.document.body.innerHTML = 'Close Me';
}
</script>
Open Me
It creates a popup with a link to close the window and refresh parent.
Demo: https://jsfiddle.net/eke4f72r/
Method 2
<script>
function popup() {
var win = window.open("", "Page Title", "toolbar=no, location=no");
var win_timer = setInterval(function() {
if(win.closed) {
window.location.reload();
clearInterval(win_timer);
}
}, 100);
}
</script>
Open Me
It detects from the parent window if child is closed. If true, it reloads the page.
Demo: https://jsfiddle.net/gv6nmdn9/
EDIT When using method 1, make your parent to open the popup you want and just add this in your child:
Close Me

Detect it in parent page:
iframe=window.open("");
iframe.onclose=function(){
window.location="redirect";
};

Close child window on f5 refresh

I have a piece of code that launches another page in an external window.
var myOpenWindow = window.open(...);
I manage this window throughout the applications life cycle and once the forum is completed my managing state closes this window.
However, the issue I am facing is that if the user hits f5 for a hard refresh the window is still open after the main page loads.
At first I thought I could override the window.open to track the state of open windows from my app in a global variable. However, I overlooked the fact that on an f5 reset my global is lost.
This seems like a simple problem, but the solution has evaded me. Is there anyway to close a window opened by window.open when the parent is refreshed?

var myOpenWindow = window.open(...);
window.onunload = function(){myOpenWindow.close()};
or better
window.addEventListener('unload',function(){myOpenWindow.close()})
should do that.
MDN: WindowEventHandlers.onunload

Maybe you could use a DIV and place it in the center of the screen. Add some jQueryUI magic and you don't have to worry about popups or blockers or other stuff.

You can keep the window open, with the following code :
When you reload the parent page, the child will change the myOpenWindow when parent page will be loaded.
Parent window :
function detectChild(child) {
myOpenWindow = child;
//opener.actionWhenOpen();
}
var myOpenWindow = window.open(...);
window.onunload = function() {
if (myOpenWindow) {
myOpenWindow.refreshParent();
}
};
Child windows :
if (opener) {
//opener.actionWhenOpen();
opener.onunload = function() {
if (opener && opener.myOpenWindow) {
opener.myOpenWindow.refreshParent();
}
};
}
function refreshParent() {
this.i = ((this.i) ? this.i : 0)+1;
var i = this.i;
setTimeout(function() {
if (!opener) {
return console.log("Opener closed.");
} else if (opener.detectChild && !opener.myOpenWindow) {
this.i = 0;
opener.detectChild(window);
} else if (i < 900) {
console.log("Opener cheked("+i+").");
refreshParent(i++);
}
}, 50);
}

How to set value of child pop op elements from parent window using Javascript?

I am calling a pop up window from a parent page using :
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
I then try to set the value of two spans which are on chil pop up from parent window using this childWindow object.
childWindow.onload = function () {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
};
this code works fine as long as I am using chrome. But it refuses to work on IE8. There are no console errors either.
I tried removing childWindow.onload = function () { } but then the page would just sort of refresh on both chrome and IE8.
UPDATE
This did not work either.
function CallPopUp(rowindex,controlname ) {
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}

If test.aspx is in the browser cache, it is possible that the onload event has already happened before you attach your event handler so you're missing it (IE is known to do this with image load events). I'd suggest you check document.readyState before attaching your event handler.
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
As another option, you can put the values into the query parameters for the URL:
`"test1.aspx?hidden1=" + rowindex + "&hidden2=" + controlname`
and then have the popup window load it's own fields from it's own onload handler from what's in the query string. Then, you can keep the code in the popup window self contained and you don't have to try to modify one window from another.
If you don't want the user to see this or be able to edit it, you can turn off the location bar in the popup window.

Show message in parent page after closing popup child

I have this code in a child window (popup):
function confirmation() {
var answer = confirm("Close?")
if (answer) {
var popup = window.open('../index.php?accao=some');
popup.document.getElementById('boxid').style.visibility="visible";
} else {
return false;
}
}
And, in the parent page I have:
<div id="boxid" style="visibility: hidden">Success</div>
What I want is to show the #boxid when I click in the popup to close. Why doesn't this code work?
UPDATE: still not working.
var popup = window.parent;
popup.document.getElementById('boxid').style.visibility="visible";

You should use window.parent to refer to the parent page.
What you are doing will open a new window.

Putting HTML from the current page into a new window

I want to open a new window and carry over some of the HTML in the original page to the new window. What is the simplest way to do this?
Something like:
$("div#foo").click( function(){
var copyHTML = $("table.bar").html();
window.open(''); // somehow put copyHTML in the new window
});

Try the following:
$("div#foo").click
(
function()
{
var copyHTML = $("table.bar").html();
var newWindow = window.open('');
newWindow.document.body.innerHTML = copyHTML;
}
);
This will work in some cases, and is the easier than the next approach.
If you get security warnings from your browser, the next approach may be more agreeable. Add a function within the parent page called getContent, like so:
function getContent()
{
return $("table.bar").html();
}
...and on document.ready in the child window do the following:
$(document).ready
(
function()
{
var parentContent = window.opener.getContent();
$("body").html(parentContent);
}
);