Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Sending data back to opener window, closing the pop up (AJAX)

Avatar of Erie_Laker
Erie_Laker asked on
JavaScriptAJAXjQuery
14 Comments1 Solution285 ViewsLast Modified:
I am not a programmer, so please go easy on me.

What I need to accomplish is the following:

- the page 1 will have a link to open up a new window (please, refrain from asking why I need to open up a new window)
- the new window will have a form displayed. The form, when submitted (php), will fill in the database with some values entered into the form fields.  There will also be a CLOSE THIS WINDOW button or a link.
-onclick to this button or link, I would like to invoke an ajax script that would not only close the pop up window, but (before that) change the content of one part of the opener window (instead of refreshing the entire page).

Now, I've seen it done, and I suppose it is not that difficult (when you really know what you are doing).

I think I am stuck with how to reference the DIV id in the opener window.

And before you suggest to me that I need to learn jQuery or similar... please understand that this is urgent and I need the simplest solution that I can understand.

So, here is an simplified example:










page.htm 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="description" content=" " />
	<meta name="keywords" content=" " />
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="revisit" content="14 days" />
    <meta name="revisit-after" content="14" />
<style type="text/css">
<!-- 
#welcome {
margin: 300px auto;
width: 150px;
}
//-->
</style>
<script language="JavaScript">
<!-- hide
function openNewWindow() {
popupWin = window.open('popup.php', 'open_window', 'width=400, height=400')
}
// done hiding -->
</script>
</head>
<body>
<div id="welcome"><a href="javascript:openNewWindow();">Click here</a></div>

</body>
</html>

popup.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="description" content=" " />
	<meta name="keywords" content=" " />
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="revisit" content="14 days" />
    <meta name="revisit-after" content="14" />
<script>
<!-- 
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    request = false;
  }
}
@end @*/

if (!request && typeof XMLHttpRequest != 'undefined') {
  request = new XMLHttpRequest(); 
}

function sendData() {
var name = document.getElementById("name").value;
var url = 'update.php';
request.open("POST", url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = updateDiv;
request.send("name=" + name);
window.self.close();
}


function updateDiv() {
if (request.readyState == 4) {
	if (request.status == 200) {
var customer =  request.responseXML;
var customer_name = customer.getElementsByTagName("customer_name")[0].firstChild.nodeValue;
var welcome = window.opener.document.getElementById("welcome");
welcome.firstChild.nodeValue = customer_name;
	}
}

}
//-->
</script>
</head>
<body>
<?php 
if (isset($_POST['submit'])) { 
echo 'Your name is ' . $_POST['name']; ?>
<p><a href="#" onclick="sendData()";>Close this window</a></p> <? 
} else {
echo '<form action="popup.php" method="post">
Name: <input type="text" name="name" id="name"> <input type="submit" name="submit" value="Submit" />
</form>';
}
?>



</body>
</html>

update.php
<?php 
header('Content-Type: text/xml');
$customer_name = $_POST['name'];
 echo '<?xml version="1.0" encoding="UTF-8"
  standalone="yes"?>'; 
?>
<customer>
	<customer_name><?php echo $customer_name; ?></customer_name>
</customer>
ASKER CERTIFIED SOLUTION
Avatar of pradyahuja
pradyahujaFlag of Australia image

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 14 Comments.
See Answers