JavaScript - Child Windows Not Closing After Refreshing Parent Page

Hey, I'm looking for a way to get a variable from a parent window in a child window. I'm aware that you can write the variable to a hidden field and then get the field's value in the child window, but I'm looking for a cleaner (all JS preferable) way of doing this.

Something like this, but I believe this is an out-dated solution:
Code:

var str = window.opener.str;
alert(str);

Any solutions?

Hi Experts,

i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one.

i.e


ARRAY1
ID VAL ID2
2 Dep1 10
3 Dep2 20
4 Dep3 30

ARRAY2

ID VAL ID2 PARENT
20 team1 11 10
21 team2 12 10
22 team3 13 20
23 team4 14 30


i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10).


how this can be possible thanks

Hi,

I have a small problem with a page I'm working on. I have an anchor tag inside a table that has a mouseover event that updates a contextual help box. I need to add a similar mouseover event to the anchor tag that does the same thing, but updates the help box with different text.

The problem I have is that when the mouse is over the table, no matter if I move the mouse over the anchor, the help text only displays the message that is passed from the table's mouseover function call.

I think the solution *may* be something to do with event bubbling, but I'm not exactly sure how to implement it. The code I'm dealing with is below:

The code below is PHP.
The table mouseover (for reference):
Code:

echo "<table class='cleanTable' width='100%' style='margin-top: 5px'";
	    echo " onMouseOver=\"updateHelpText('Message 1.');\" onMouseOut='clearHelpText();'>";
	    echo "<tr><th>&nbsp;</th><th>&nbsp;</th><th>First Name</th><th>Surname</th><th>Last Login</th></tr>";

The anchor mouseover:
Code:

echo "<tr class='cleanrow'><td><a href='newMember.php'><img border='0' src='images/icon_add.gif'></a></td><td></td>";
		echo "<td colspan='3'><a class='workbenchLink' href='newMember.php' onMouseOver=\"updateHelpText('Message 2');\" onMouseOut='clearHelpText();'>Invite a new colleague...</a></td></tr>";
		echo "</table>";

The function (javascript):
Code:

function updateHelpText(newText) {
		document.getElementById("helpBox").innerHTML = "<h4>&nbsp;" + newText + "</h4>";
	 }

Any help with this would be great, thanks.

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

For a widget I made, I have a dropdown select menu. It is constrained to a very small width and IE does not auto expand on click. I wrote a simple javascript to handle this but I run into two problems. The onmouseout function is fired when I click into a child node, and the onmousedown of the <option> tags doesn't work in IE. The code works fine in all other browsers.

var wid;
var campaign_i = 0;
function campaignWidget_capture(myID){
wid=document.getElementById(myID).style.width;
campaign_i++;
}
function campaignWidget_SubDes(myID,state){
if(state==0){
if(campaign_i==0)
campaignWidget_capture(myID);
document.getElementById(myID).style.width="auto";
}else
document.getElementById(myID).style.width=wid;
}

onmouseout="campaignWidget_SubDes(id,1)" This is in the select tag.

onmousedown="campaignWidget_SubDes(id,0)" This is in the select tag

onmousedown="campaignWidget_SubDes('campaignWidget_Sub_Designation',1)" This is in the option tag.

i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox


Parent.html


<HTML>

<SCRIPT TYPE="text/javascript">
function sendTo()
{
window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+'');

}



</SCRIPT>



<BODY >
<form name="form">

<input type="text" value="" name="text1" id="pdetails1">
<input type="text" value="" name="text1" id="pdetails2">
</br>


<input type="submit" value="submit" onClick="sendTo()">

</BODY>
</HTML>


child.html

<html>
<body>
<form>
<input type=text name="text5" value="">
<input type=submit name="submit"value="submit">
</form>
</body>
</html>

I have created and opened a child window called "checkwin" and have written some data to it. If the data is valid, I want the user to click on the 'CONFIRM' button on the child window, at which time I want the "submit()" function for the form on the parent window to be executed. If the data is invalid the user clicks on 'MODIFY' and I want focus to return to a field on the parent form. However, when I click on the "CONFIRM" or "MODIFY" buttons on the child window, nothing happens. Here is the code:

Code:

checkwin.document.write("</td></tr><tr><td align='right'><input type='button' value='CONFIRM' 
onclick='opener.document.personnel_form.submit()'></td><td></td><td><input type='button' value='MODIFY' 
onclick='opener.document.personnel_form.first_name.focus()'></td></tr></table>")

Hi All,

I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only.

We have used the below code

self.blur();
Window.opener.focus();

But this is not working in Google Chrome.

Please suggest me some workaround to achieve this.

Thanks in Advance





Reply With Quote




12-19-2014, 09:26 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Window is not defined.

window is.

JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully.

By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost.

After following the instructions from the answer below:
http://bytes.com/topic/javascript/an...arent-document

I was able to have the child window perform the function defined in the parent window.

The function was to only have an alert window pop up as the child page was loading.

I easily modified this to my intention which was to have a parent function performed when the child window was clicked.

Using the body tag:

Code:

<body onclick="parent.FUNCTION NAME HERE()">

I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens.

The site this is being used on is:


http://tylerpanesar.ca/

What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window.
This already works.
However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open.

Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option.

I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this.

The script that tells it to hide on click is within a jQuery function:

Code:

menua
.click(
function(){
menu.hide();

the code I used for the mouseout toggle was:

Code:

menu
.mouseout(
function(){
menu.toggle();

Here is the script that I am currently using for the menu to open and the "click" hide feature.

This menu feature comes from the following help:

http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm

Code:

<script type="text/javascript">
        jQuery(function( $ ){
            var menuRoot = $( "#menu-root" );
            var menu = $( "#menu" );
            var menua = $( "#menu a" );
            // Hook up menu root click event.
            menuRoot
                .attr( "href", "javascript:void( 0 )" )
                .click(
                    function(){
                        // Toggle the menu display.
                        menu.toggle();
                        // Blur the link to remove focus.
                        menuRoot.blur();
                        // Cancel event (and its bubbling).
                        return( false );
                    }
                )
            ;
            menua
                .click(
                    function(){
                        // Toggle the menu display.
                        menu.hide();
                    }
                )
            ;
            // Hook up a click handler on the document so that
            // we can hide the menu if it is not the target of
            // the mouse click.
            $( document ).click(
                function( event ){
                    // Check to see if this came from the menu.
                    if (
                        menu.is( ":visible" ) &&
                        !$( event.target ).closest( "#menu" ).size()
                        ){
                        // The click came outside the menu, so
                        // close the menu.
                        menu.hide();
                     }
                }
            );
         });
 </script>

I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide".

What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child.

There should be a way to make the child execute a function FOR the parent.

I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now.

Any help would be greatly appreciated.
Thanks in advance,
Tyler

I am a music geek. I am also a Javascripter who doesn't know much, but enough to get around the language. Anyways, I wrote a script to construct chords to make writing music easier for me. The script works, it shows there are no errors, and it does what I want it to do, but the page keeps refreshing almost immediately after the Alert box goes away. I have no idea whats going on. I don't know if it's the JS or the HTML part of the page. If you have any ideas that would be great.

Code:

<head>
<script>

function calc()
{

var type, note, root, third, fifth, seven, ans;
var notess, notesb;

type=document.f1.type.value
note=document.f1.note.value*1

notess=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"]
notesb=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"]

if(type=="maj")
{

root=notess[note]
third=notess[(note+4)%12]
fifth=notess[(note+7)%12]
seven=notess[(note+11)%12]

ans=root+", "+third+", "+fifth+", "+seven;
alert(ans)

}

if(type=="min")
{

root=notess[note]
third=notess[(note+3)%12]
fifth=notess[(note+7)%12]
seven=notess[(note+11)%12]

ans=root+", "+third+", "+fifth+", "+seven;
alert(ans)

}

document.getElementById("here").innerHTML=ans

}

</script>
</head>
<body>

<h1>Chord Builder</h1><p>

<form name="f1">
Make a:<br>

<select name="note">
<option value="0">A<br>
<option value="1">A#/Bb<br>
<option value="2">B<br>
<option value="3" selected>C<br>
<option value="4">C#/Db<br>
<option value="5">D<br>
<option value="6">D#/E<br>
<option value="7">E<br>
<option value="8">F<br>
<option value="9">F#/Gb<br>
<option value="10">G<br>
<option value="11">G#/Ab<br>
</select>

<select name="type">
<option value="maj" selected>Major<br>
<option value="min">Minor<br>
</select>
<br>

<button onClick="calc()">Make my Chord!</button></br>

</form>

<span id="here">-chords will be here soon-</span>

<p>

</body>

Hi,

I am creating a new child air window called "test.html" as follow. How can I call a javascript function in parent window from child window?


function createMyWindow()
{
var options = new air.NativeWindowInitOptions();
options.type = air.NativeWindowType.LIGHTWEIGHT;
options.systemChrome = air.NativeWindowSystemChrome.NONE;
options.transparent = true;

mywindow = air.HTMLLoader.createRootWindow(false, options, false);

mywindow.load(new air.URLRequest("test.html"));

....

}



Thanks,

ASM

For a parent window opened a child window, how can the parnet window be notified when the child window is closed or terminated?

Thank you.

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

Hi,

I have parent page with 10 child window and i want to close all child window when click on close session button on parent but first i need to check whether any child window open or not after that action should be done for close the child window.

hello all,

i'm newbie in javascript fucntion. here i got problem to passing the value from child popup form to parent form. here my code

parent form
Code:

<script language="JavaScript">
	function selectItem(){
		var selindex=document.myForm.myselect.selectedIndex;
		if (selindex!=0) {
			document.myForm.item_desc.value=myArray[1]; 
			document.myForm.item_code.value=myArray[0]; 
		}
	}
</script>

<form  name="myForm"  method="post">

<input  class="input" type="text"  name="item_code" id="item_code" size="30" value ="" /> 
<input type="button" name="opener" value="Search"  class="myButton" onclick="window.open('child_form.php',
		'print_view','left=20,top=20,width=750,height=650,toolbar=0,resizable=0,scrollbars=1');return(false);" /> 

<input class="input" type="text"  name="item_desc" id="item_desc" size="80" value ="<?php echo $item_desc?>" />
</form>

child_form.php
Code:

<script language="JavaScript">
	function selectItem(){
		var selindex=document.popUpForm.myselect.selectedIndex;
		if (selindex!=0) {

	   		window.close();
			var myArray = document.popUpForm.myselect[selindex].value.split('*');
			window.opener.document.myForm.item_desc.value=myArray[1];
			window.opener.document.myForm.item_code.value=myArray[0];
		}
	}

</script>

<form name="popUpForm">

$i = 0;
while ($i < 5){
  <input type="image" src="images/plus.png"  onclick="selectItem();" name="myselect[]" value=<?php echo $i."*".test;?> width="18" height="18"/>      



$i++;
}
</form>