Show message in parent page after closing popup child - javascript

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.

Related

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";
};

popup gets closed automatically

I have to refresh my parent window once I am done with the changes in the popup window, for which I use :
<BODY onunload="opener.location.reload();">
But this closes my window on any event, like save, whereas I don't want to get it close. I want to close my window only by clicking window close or by clicking close button in my jsp with "Javascript".
For closing thru "Close" button.
JS :
function closeAndRefresh(){
opener.location.reload(true);
window.close();
}
Solved the problem
JS:
var myclose = false;
function ConfirmClose()
{
if (event.clientY < 0)
{
myclose=true;
}
}
function HandleOnClose()
{
if (myclose==true)
{
opener.location.href = "<%=request.getContextPath()%>parent_jsp_path";
window.close();
}
}
HTML:
<BODY onbeforeunload="ConfirmClose();" onunload="HandleOnClose();">

Disable link after child window is open, restore once child window is closed

My client has a link on their website which opens a customer service chat window in a popup. They are seeing users clicking the chat link multiple times, which opens multiple chat sessions, and it is throwing off their stats. I need to disable the link when the chat window is opened, and restore it when the chat window has been closed. I can't modify/access child window.
The original link looks like this:
<a class="initChat" onclick="window.open('https://chatlinkhere.com','chatwindow','width=612,height=380,scrollbars=0'); return false;">
I figured the best thing to do would be to store the window.open() as a variable in a function:
function openChat() {
child = window.open('http://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0,menubar=0');
}
and change the link HTML to
<a class="initChat" onclick="openChat();">
Note: Ideally, I'd like to detect the original onclick's value, and store it in a variable. Something like:
jQuery('.initChat').find().attr('onclick');
But I'm not sure how to store it and then call it later.
Next I need to run a check to see if the chat window is open or not:
timer = setInterval(checkChild, 500);
function checkChild() {
if (child.open) {
alert("opened");
jQuery(".initChat").removeAttr("onclick");
jQuery(".initChat").css("opacity", ".5");
clearInterval(timer);
}
if (child.closed) {
alert("closed");
jQuery(".initChat").attr('onclick', 'openChat(); checkChild();');
jQuery(".initChat").css("opacity", "1.0");
clearInterval(timer);
}
}
Note: the alerts are just there for testing.
And add the new function to the link
<a class="initChat" onclick="openChat(); checkChild();">
And once the chat window is closed, I need to restore the onclick attribute to the link (is there an easier way to do this?)
Fiddle demo is here -> http://jsfiddle.net/JkthJ/
When I check Chrome Console I'm getting error
Uncaught TypeError: Cannot read property 'open' of undefined
UPDATE
Whoever left me the answer in http://jsfiddle.net/JkthJ/2/ thank you very much it works! :)
i think you need is open pop up if already open then foucus on pop up or noyhing should happen
you can rewrite your function as
var winPop = false;
function OpenWindow(url){
if(winPop && !winPop.closed){ //checks to see if window is open
winPop.focus(); // or nothing
}
else{
winPop = window.open(url,"winPop");
}
}
just do it in a simple way. disable the mouse events on anchor link after child window open.
css
.disableEvents{
pointer-events: none;
}
js
var childWindow;
$('a').on('click',function(){
childWindow = window.open('_blank',"height:200","width:500");
$(this).addClass('disableEvents');
});
if (typeof childWindow.attachEvent != "undefined") {
childWindow.attachEvent("onunload", enableEvents);
} else if (typeof childWindow.addEventListener != "undefined") {
childWindow.addEventListener("unload", enableEvents, false);
}
enableEvents = function(){
$('a').removeClass('disableEvents');
};
update
your child window is plain html page. Do the changes in child window html code:
<html>
<head>
<script>
function myFunction()
{
window.opener.enableEvents(); //it calls enableEvents function
}
</script>
</head>
<body onunload="myFunction()">
<!--your content-->
</body>
</html>
This is what I got to finally work:
<a class="initChat" onclick="checkWin()"></a>
<script>
var myWindow;
function openWin() {
myWindow = window.open('https://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0');
}
function checkWin() {
if (!myWindow) {
openWin();
} else {
if (myWindow.closed) {
openWin();
} else {
alert('Chat is already opened.');
myWindow.focus();
}
}
}
</script>

communicate from parent to popup tab using jQuery

I've seen a lot of posts on communicating from the popup back to parent using window.opener.$('#myDiv').
But once a popup is opened, how does the parent: target and control a div inside the popup?
I'm opening my popup using window.open(url, 'myPopup', 'width=50', 'height=50');
You can adress the parent from the popup like this:
window.opener.foo();
or, on a generic way:
window.opener.property
And, to make sure the parent is still alive:
if (window.opener && !window.opener.closed)
{
// do something
}
On the parent view, you might try:
function add_content(page, text)
{
var texts = page.document.getElementById("content");
texts.innerHTML += text;
}
function start()
{
var popup_page = window.open("popup.htm");
var str = document.getElementById("content").innerHTML;
alert(str);
add_content(popup_page, window.location+" : "+str);
// window.close(); // ?
}

refresh child window from parent window

Using JavaScript
i have the refresh button in my parent window,
when i click refresh button ,
i want to refresh my child window ,
window.location.href='add_billing_order_frm.php?session_re_genrate=new
This snippet redirecting the page instead refresh ,
I thing there is a snippet like
opener.document.location.reload(true);
but this one for parent window refresh, but i want for child window wiht URL location option
function show_billing_order_form(url){
var childWindow = window.open(url);
}
function refresh_my_child_window(){
return childWindow.location.reload('add_billing_order_frm.php');
}
To open a popup window(child window) , i used this show_billing_order_form call back ,
To refresh the child window , i add one refresh icon in my parent window , To refresh the child window , in that refresh icon onclick i called refresh_my_child_window ,
but function refreshing my child window..
When opening your child window from the parent, remember the return value in a variable somewhere:
var childWindow = window.open(/* ... */);
...and when you want to refresh the child:
childWindow.location.reload();
Note that some browsers will prevent access to childWindow.location.reload if the parent and child aren't loaded from the same origin.
Here's a quick-and-dirty example (live copy — note: the live copy only works in non-edit mode, like the link given, because otherwise JSBin uses null.jsbin.com instead of output.jsbin.com and so the origin doesn't match):
HTML:
<input type='button' id='btnOpen' value='Open Child'>
<input type='button' id='btnClose' value='Close Child'>
<input type='button' id='btnRefresh' value='Refresh Child'>
JavaScript:
(function() {
var childWindow;
document.getElementById('btnOpen').onclick = openChildWindow;
document.getElementById('btnClose').onclick = closeChildWindow;
document.getElementById('btnRefresh').onclick = refreshChildWindow;
function openChildWindow() {
if (childWindow) {
alert("We already have one open.");
} else {
childWindow = window.open(location.protocol + "//" + location.host + "/cotokijigu/1");
}
}
function closeChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
}
else {
childWindow.close();
childWindow = undefined;
}
}
function refreshChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
} else {
childWindow.location.reload();
}
}
})();
Caveat: I would never recommend hooking up event handlers with onclick properties as above. Instead, I'd use addEventListener (on standards-based browsers) or attachEvent (on IE), by using a library or a utility function like this one. Used the properties above to avoid obscuring the main point.
var childWindow = window.open("","name",/* .. */);
childWindow.location.reload();

Categories