I currently have an Ajax pop up window displayed from the main page of my application. In this pop up I have select list and I want to pass the selected value from the pop up back to the main page when the user closes the pop up window.
I feel there is an elementary way to do this, but I can't seem to figure it out.
I currently have an Ajax pop up window displayed from the main page of my application. In this pop up I have select list and I want to pass the selected value from the pop up back to the main page when the user closes the pop up window.
I feel there is an elementary way to do this, but I can't seem to figure it out.
Share Improve this question asked Aug 5, 2009 at 1:18 RyanRyan 1181 silver badge7 bronze badges 1- 1 what does 'ajax popup' mean? If it's a browser window popup, it's not ajax. If it's a javascript popup being populated via an ajax request, it depends on the library/code you're using – Luke Schafer Commented Aug 5, 2009 at 2:03
3 Answers
Reset to default 6Using window.opener
http://www.webreference./js/tutorial1/opener.html
When you open a popup window via javascript (no matter if the content is via ajax or some other technique) you can easily control it.
For your problem you need window.opener which points back to originating document: the clean one:
in the popup code have:
<body onclose="window.opener.somevar=document.getElementById('myid').value;window.opener.orsomefunction('value');">
<input id="myid"/>
</body>
this way, when you close it it sets a variable and/or calls a function.
you could also set the set-function on a button or directly on the input
<button onclick="window.opener....;window.close();"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?PHP
$test_1 = $_GET['variable1'];
$test_2 = $_GET['variable2'];
$test_3 = $_GET['variable3'];
$test1 = "blabla1";
$test2 = "blabla2";
$test3 = "blabla3";
?>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
//on dom ready...
window.addEvent('domready', function() {
/* ajax replace element text */
$('ajax-replace').addEvent('click', function(event) {
//prevent the page from changing
event.stop();
//make the ajax call, replace text
var req = new Request.HTML({
method: 'get',
url: $('ajax-replace').get('href'),
data: { 'variable1' : '<?=$test1?>', 'variable2':'<?=$test2?>', 'variable3' : '<?=$test3?>' },
//onRequest: function() { alert('Request made. Please wait...'); },
update: $('message-here'),
onComplete: function(response) { alert('Variable 1: <? echo $test1; ?> Variable 2: <? echo $test2; ?> Variabble 3: <? echo $test3; ?>'); $('message-here');
}
}).send();
});
});
</script>
</head>
<body>
<p>
<a href="index.php" id="ajax-replace">Click</a>
</p>
<div id="message-here">
<?PHP
echo $variable_1."<br>";
echo $variable_2."<br>";
echo $variable_3."<br>";
?>
</div>
</body>
</html>