How To: Dynamic Row in Parent Page Open New Popup in Onclick?

MikeBronner · Sep 9, 2006

Hi All!

I'm hoping someone can help me with the following code:

Code:

			var o_doc			= opener.document;
			var o_row			= null;
			var o_cell_name		= o_doc.createElement("td");
			var o_cell_phone	= o_doc.createElement("td");
			var o_cell_zip		= o_doc.createElement("td");
			
			if (o_doc.getElementById("<?= $_GET['id'] ?>")) {o_row = o_doc.getElementById("<?= $_GET['id'] ?>");}
			else {o_row = o_doc.createElement("tr");}
			
			o_cell_name.innerHTML = "<?= $_POST['name'] ?>";
			o_cell_phone.innerHTML = "<?= $_POST['phone'] ?>";
			o_cell_zip.innerHTML = "<?= $_POST['zip'] ?>";
			
			o_row.appendChild(o_cell_name);
			o_row.appendChild(o_cell_phone);
			o_row.appendChild(o_cell_zip);
			o_row.setAttribute("id", "<?= $_GET['id'] + 1 ?>");
			o_row.onclick = function() {opener.open('popup.php?id=<?= $_GET['id'] + 1 ?>', '', '');};
			
			o_doc.getElementById("list").tBodies[0].appendChild(o_row);
			window.close();

The problem here is that the onclick on works as long as the window that created the row in the parent page is open. As soon as I close the popup, the onclick no longer functions. Any ideas on how I can get this to work?

I've been toying with some general code, but haven't got it to work either. This code is on the main page, where the script from the popup (above code) inserts the row:

Code:

			document.getElementById("list").tBodies[0].childNodes.onclick = function()
			{
				window.open('popup.php?id=' + this.getAttribute("id") +, '', '');
			}

I know that the reason this generic code isn't working is because childNodes[] is an array that requires the index to be specified. Unfortunately I don't know how to work around that at this point.

Thanks for all your help!

I'll post my complete code, if that will help.

Main Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script language="javascript" type="text/javascript">
			document.getElementById("list").tBodies[0].childNodes.onclick = function()
			{
				window.open('popup.php?id=' + this.getAttribute("id") +, '', '');
			}
		</script>
	</head>
	<body>
		<table id="list" border="1">
			<thead>
				<tr>
					<th colspan="3" onclick="window.open('popup.php?id=0', '', '');" style="cursor: pointer;">List</th>
				</tr>
				<tr>
					<th>Name</th>
					<th>Phone</th>
					<th>ZIP</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</body>
</html>

Popup Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script language="javascript" type="text/javascript">
<?php
	if ($_POST['action'] == 'save')
	{
?>
			var o_doc			= opener.document;
			var o_row			= null;
			var o_cell_name		= o_doc.createElement("td");
			var o_cell_phone	= o_doc.createElement("td");
			var o_cell_zip		= o_doc.createElement("td");
			
			if (o_doc.getElementById("<?= $_GET['id'] ?>")) {o_row = o_doc.getElementById("<?= $_GET['id'] ?>");}
			else {o_row = o_doc.createElement("tr");}
			
			o_cell_name.innerHTML = "<?= $_POST['name'] ?>";
			o_cell_phone.innerHTML = "<?= $_POST['phone'] ?>";
			o_cell_zip.innerHTML = "<?= $_POST['zip'] ?>";
			
			o_row.appendChild(o_cell_name);
			o_row.appendChild(o_cell_phone);
			o_row.appendChild(o_cell_zip);
			o_row.setAttribute("id", "<?= $_GET['id'] + 1 ?>");
//			o_row.onclick = function() {opener.open('popup.php?id=<?= $_GET['id'] + 1 ?>', '', '');};
			
			o_doc.getElementById("list").tBodies[0].appendChild(o_row);
			window.close();
<?php
	}
?>		
		</script>
	</head>
	<body>
		<form method="post" action="?id=<?= $_GET['id'] ?>">
			<input type="hidden" name="action" id="action" value="" />
			<table>
				<tr>
					<td>Name:</td>
					<td><input type="text" id="name" name="name" /></td>
				</tr>
				<tr>
					<td>Phone:</td>
					<td><input type="text" id="phone" name="phone" /></td>
				</tr>
				<tr>
					<td>ZIP:</td>
					<td><input type="text" id="zip" name="zip" /></td>
				</tr>
				<tr>
					<td colspan="2"><input type="button" value="Save" onclick="document.getElementById('action').value = 'save';this.form.submit();" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

Take Care,
Mike

vbkris · Sep 11, 2006

hi,

the onclick event is for the link right?

is that the only object on that page that will have the onlcick event?

what exactly is the use of this:

<script language="javascript" type="text/javascript">
document.getElementById("list").tBodies[0].childNodes.onclick = function()
{
window.open('popup.php?id=' + this.getAttribute("id") +, '', '');
}
</script>

Known is handfull, Unknown is worldfull

MikeBronner · Sep 11, 2006

Hi vbkris,

I was trying to make a generic function that would take care of the onclick events for allrows belonging to a certain table, which I have dismissed as not feasable.

The workaround I found was to declare the onclick event in the parent window itself, and not in the popup window, as I previously was. That worked.

The code now looks like this:
Main Window:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script language="javascript" type="text/javascript">
            function add_onclick(id)
            {
                document.getElementById(id).onclick = function
                {
                    window.open('popup.php?id=' + id +, '', '');
                }
            }
        </script>
    </head>
    <body>
        <table id="list" border="1">
            <thead>
                <tr>
                    <th colspan="3" onclick="window.open('popup.php?id=0', '', '');" style="cursor: pointer;">List</th>
                </tr>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>ZIP</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
</html>

Popup Window:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script language="javascript" type="text/javascript">
<?php
    if ($_POST['action'] == 'save')
    {
?>
            var o_doc            = opener.document;
            var o_row            = null;
            var o_cell_name        = o_doc.createElement("td");
            var o_cell_phone    = o_doc.createElement("td");
            var o_cell_zip        = o_doc.createElement("td");
            
            if (o_doc.getElementById("<?= $_GET['id'] ?>")) {o_row = o_doc.getElementById("<?= $_GET['id'] ?>");}
            else {o_row = o_doc.createElement("tr");}
            
            o_cell_name.innerHTML = "<?= $_POST['name'] ?>";
            o_cell_phone.innerHTML = "<?= $_POST['phone'] ?>";
            o_cell_zip.innerHTML = "<?= $_POST['zip'] ?>";
            
            o_row.appendChild(o_cell_name);
            o_row.appendChild(o_cell_phone);
            o_row.appendChild(o_cell_zip);
            o_row.setAttribute("id", "<?= $_GET['id'] + 1 ?>");
            opener.add_onclick(<?= $_GET['id'] + 1 ?>)
            o_doc.getElementById("list").tBodies[0].appendChild(o_row);
            window.close();
<?php
    }
?>        
        </script>
    </head>
    <body>
        <form method="post" action="?id=<?= $_GET['id'] ?>">
            <input type="hidden" name="action" id="action" value="" />
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input type="text" id="name" name="name" /></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text" id="phone" name="phone" /></td>
                </tr>
                <tr>
                    <td>ZIP:</td>
                    <td><input type="text" id="zip" name="zip" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="button" value="Save" onclick="document.getElementById('action').value = 'save';this.form.submit();" /></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Take Care,
Mike

vbkris · Sep 13, 2006

hi,

wht i am trying to say is that the open() command is already there in the link.

why do you require one at the top???

Known is handfull, Unknown is worldfull

MikeBronner · Sep 14, 2006

The one at the top is for dynamically added rows.

Take Care,
Mike

vbkris · Sep 15, 2006

why not do it when you create the row? each row will have a button right? when you create the button you can always add the window.open code to it (i dont see any buttons creation code).

maybe i am getting you wrong, but could you give me a solid example (scenario)???

Known is handfull, Unknown is worldfull

MikeBronner · Sep 15, 2006

The above code is a working example. And there are no buttons. Just copy and paste, and open in browser.

Take Care,
Mike

vbkris · Sep 20, 2006

hi dude,

i was unable to install PHP on my machine. it would be great if i can get the pure HTML for a sample popup...

Known is handfull, Unknown is worldfull

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How To: Dynamic Row in Parent Page Open New Popup in Onclick?

MikeBronner

Programmer

vbkris

Programmer

MikeBronner

Programmer

vbkris

Programmer

MikeBronner

Programmer

vbkris

Programmer

MikeBronner

Programmer

vbkris

Programmer

Similar threads

Part and Inventory Search

Sponsor