Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts

    passing data from parent window to child window problems

    Hi,

    I am trying to pass data from a parent window to a child window. But there are several problems. The code snippet is following:

    Parent Window:
    var v = document.createElement("input");
    v.setAttribute('id', 'test');
    v.setAttribute('value', 'TEST');

    function openNewWindow() {
    var w = window.open("childwindow");
    }

    Child Window:
    var v = window.opener.document.getElementById("test");
    alert(v);

    The first problem is that the alert(v) in Child window returns a null. It seems like v is not delivered from parent window to the child window. Also, the parent window is reloaded when I click the button which triggers openNewWindow function in parent window.

    I have no idea of that problems. Any suggestion is very welcomed.

    Thanks!
    Jian

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Why does the parent window need to be reloaded when the child window is opened? At the moment the child window references the supposedly created input field in the parent window, the parent window is being reloaded or has reloaded and the created input is gone.

  • #3
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi glenngv,

    Thank you very much for your help.

    The parent window reloading problem is gone. But the data from parent window still can not be delivered to child window. More code snippet is as following:

    Parent Window:
    <html>
    <head>
    <script type="text/javascript">
    function load() {
    var html = document.createElement("form");
    html.setAttribute(''onsubmit', openChild()');
    var elem = document.createElement("input");
    elem.setAttribute('id', 'name');
    elem.setAttribute('value', 'test');
    html.appendChild(elem);
    document.getElementById("addtable").innerHTML = html;
    }
    function openChild() {
    var w = window.open("test_child.html");
    }
    </script>
    </head>
    <body onload="load()">
    <div id="addtable"></div>
    </body>
    </html>

    Child Window:
    <html>
    <head>
    <script type="text/javascript">
    var v = window.opener.document.getElementById("elem");
    alert(v);
    </script>
    </head>
    <body>
    </body>
    </html>

    The result of alert(v) in child window is still null. Please give some suggestions. Thanks!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    The id of the created input is not 'elem' but 'name'

    Code:
    elem.setAttribute('id', 'name');
    Code:
    var v = window.opener.document.getElementById("elem");
    Also make sure that the form and the input are really added on the page. Using innerHTML will not work as it expects a string not node, use appendChild instead.

  • #5
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi glenngv,

    Thank you very much for the reply. It really helps.
    I am sorry for some misleading of the code snippet because I want to demonstrate the problem in the simply way. In my real project, I use google map infowindow to connect map marker and popup form.

    var infoWindow;
    infoWindow = new google.maps.InfoWinfow;

    function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setcontent(html);
    infoWindow.open(map, marker);
    });
    }

    I want to use the infoWindow to popup the form and send the data in the form to the child window. The google map infoWindow accepts string and DOM. It only has infoWindow.setcontent(html). It doesn't have API like infoWindow.appendChild(html). I may need to look for postMessage for data passing between parent-child window, or google map customer layer for passing data. Please give some advices. Thanks in advance!

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    it's a little bit hacky, but you can pass the html to make the form as a string (this seems to be the common way to get around infowindow setContent restraints, anyway):
    Code:
    var html = '<form onsubmit="openChild()"><input id="name" value="test"/></form>'

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by jianmarf View Post
    Hi glenngv,

    Thank you very much for the reply. It really helps.
    I am sorry for some misleading of the code snippet because I want to demonstrate the problem in the simply way. In my real project, I use google map infowindow to connect map marker and popup form.

    var infoWindow;
    infoWindow = new google.maps.InfoWinfow;

    function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setcontent(html);
    infoWindow.open(map, marker);
    });
    }

    I want to use the infoWindow to popup the form and send the data in the form to the child window. The google map infoWindow accepts string and DOM. It only has infoWindow.setcontent(html). It doesn't have API like infoWindow.appendChild(html). I may need to look for postMessage for data passing between parent-child window, or google map customer layer for passing data. Please give some advices. Thanks in advance!
    You should have told right away that you were using google maps api. Your sample code is totally different than what you are really doing. Google maps InfoWindow does not open in new popup window but just a simple overlay (at least that's what I see here). Reading up on how InfoWindow works, I think xelawho's suggestion will work.

  • #8
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi xelawho,

    Thank you very much for the help. The only thing I concern is that making a form as a string can not dynamically update the input value in the form. I need to query a database and update the inputs in the form dynamically. I will try postMessage and see if it works. Thanks again!

  • #9
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi glenngv,

    Thank you very much for your reply and sorry for the misleading.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    Quote Originally Posted by jianmarf View Post
    Hi xelawho,

    Thank you very much for the help. The only thing I concern is that making a form as a string can not dynamically update the input value in the form. I need to query a database and update the inputs in the form dynamically. I will try postMessage and see if it works. Thanks again!
    not sure that I get this - of course you can add a variable into a string dynamically...

    Code:
    var whatever1="name";
    var whatever2="test";
    
    var html = '<form onsubmit="openChild()"><input id="'+whatever1+'" value="'+whatever2+'"/></form>'

  • Users who have thanked xelawho for this post:

    jianmarf (04-03-2014)

  • #11
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi xelawho,

    Thank you very much for your help. I will try the method you suggested. Also, I tried postMessage to pass data between parent window to child window but it doesn't work. The code snippet are as following. In order to simplify the test, I don't use google map on these small programs.

    Parent Window:
    <html>
    <head>
    <script type="text/javascript">
    function initialize() {
    var html = "<table>" +
    "<tr><td>Name:</td><td><input type='text' id='name' value=name></td></tr>" +
    "<tr><td></td><td><input type='button' value=Save' onclick='SaveData()'/></td></tr>";
    document.getElementById("addtable").innerHTML = html;
    }

    function SaveData() {
    var w = window.open("test_child.html");
    w.postMessage("test", "http://localhost/test_child.html");
    }
    </script>
    </head>
    <body onload="initialize()">
    <div>id="addtable"></div>
    </body>
    </html>

    The child window :
    <html>
    <head>
    <script type="text/javascript">
    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
    alert("ok?");
    var v = event.data;
    }
    </script>
    </head>
    <body>
    </body>
    </html>

    When I click the Save button in the table of parent window, the child window is opened. But the data is not delivered. The alert("ok?") does not appear.So it looks like the message in parent window doesn't send to child window. I use the firefox. Please give some advices. Thanks again!

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    By the time you attached the 'message' event to the child window, the message has been posted by the main window. You need to tell the main window when to postMessage once the child window is ready.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <div id="addtable"></div>
    
    <script type="text/javascript">
    (function(){
    	var w;
    
    	function initialize() {
    		var html = "<table>" +
    		"<tr><td>Name:</td><td><input type='text' id='name' value=name></td></tr>" +
    		"<tr><td></td><td><input type='button' value=Save' onclick='SaveData()'/></td></tr>";
    		document.getElementById("addtable").innerHTML = html;
    	}
    
    	function SaveData() {
    		w = window.open("test_child.html");	
    	}
    
    	function receiveMessage(event) {
    		if (event.origin !== location.protocol + '//' + location.host) { //don't process message from other domains for security
    	    		return;
    		}
    
    		var data = event.data;
    		if (data === 'ready') {
    			//child window is ready, it's now time to post the message
    			if (w && !w.closed) {
    				w.postMessage("test", location.protocol + '//' + location.host);
    			}
    		}
    	}	
    
    	window.addEventListener("message", receiveMessage, false);
    	window.addEventListener("load", initialize, false);
    })();	
    </script>
    </body>
    </html>
    The child window :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    Content here...
    
    <script type="text/javascript">
    (function(){	
    
    	function receiveMessage(event) {
    		if (event.origin !== location.protocol + '//' + location.host) { //don't process message from other domains for security
    			return;
    		}
    
    		var data = event.data;
    		alert("received data: " + data);
    	}
    
    	window.addEventListener("message", receiveMessage, false);
    
    	//inform main window that this window is ready.
    	if (opener && !opener.closed) {
    		opener.postMessage('ready', location.protocol + '//' + location.host);
    	}
    })();
    </script>	
    </body>
    </html>

  • Users who have thanked glenngv for this post:

    jianmarf (04-04-2014)

  • #13
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much for the reply. It really helps.

  • #14
    New Coder
    Join Date
    Feb 2014
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi glenngv,

    I tried the code you posted with just some minor modifications. The code snippet is:

    Parent window:
    <html>
    <head>
    <script type="text/javascript">
    var w;
    function initialize() {
    var v = "test";
    var html = '<form onsubmit="openChild()"><input id="name" value="'+v+'"/><input type="submit" value="openChild"/></form>';
    document.getElementById("addtable").innerHTML = html;
    }
    function openChild() {
    w = window.open("test_child.html");
    }
    function receiveMessage(event) {
    if (event.origin !== "http://localhost")
    return;
    var data = event.data;
    if (data === 'ready') {
    alert(w);
    if (w && !w.closed) {
    var v = document.getElementById("name");
    w.postMessage(v.value, "http://localhost");
    }
    }
    }
    window.addEventListener("message", receiveMessage, false);
    window.addEventListener("load", initialize, false);
    </script>
    </head>
    <body>
    <div id="addtable"></div>
    </body>
    </html>

    Child window:
    <html>
    <head>
    <script type="text/javascript">
    function load() {
    window.addEventListener("message", receiveMessage, false);
    if (opener && opener.closed) {
    opener.postMessage('ready', "http://localhost");
    }
    }
    function receiveMessage(event) {
    if (event.origin !== "http://localhost")
    return;
    var data = event.data;
    alert("received data: " + data);
    }
    </script>
    </head>
    <body onload="load()">
    </body>
    </html>

    When I test the programs, the child window can send message to the parent message. The parent can get the 'ready' message. The problem is that w is undefined in receiveMessage function in parent window. I assume that w is a global variable and has been defined by w=window.open("test_child.html"). I am confused. If you have any advices, please let me know. Thanks in advance.

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    w is undefined because you open the child window when the form is submitted which reloads the form. You need to open the child window using a regular button like what you were initially doing.

    But if you want to keep it this way, you need to return false on form onsubmit to cancel form submission.

    Code:
    var html = '<form onsubmit="openChild(); return false; ">
    Btw, was this just a typo? You missed the "!"
    Code:
    if (opener && !opener.closed) {
       opener.postMessage('ready', "http://localhost");
    }
    And please enclose your code in [code] [/code] to format it and make it readable.

  • Users who have thanked glenngv for this post:

    jianmarf (04-04-2014)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •