PDA

View Full Version : [Javascript] How to interact with a popup created by a different page?

WetWired
2009-06-18, 02:33 PM
I have a popup window that can be opened from any page on a site. For the purposes of explaination, let's say it's a shopping cart display. Whenever someone adds an item to the cart from a page, I want to use Javascript to tell the popup to update itself.

The way this site works, there may be many pages open that can select items in different browser windows at the same time and they all need to be able to tell the popup to update itself. As a fallback, the popup will use AJAX to periodically check for updates, but if it could update instantly, it would be better.

Any ideas?
D3V
2009-06-18, 03:19 PM
Could you have an automatic timeout on the active popup that refreshes every x amount of seconds once the window is active?
WetWired
2009-06-18, 03:29 PM
As a fallback, the popup will use AJAX to periodically check for updates, but if it could update instantly, it would be better.
Already doing that.
Goodlookinguy
2009-06-18, 04:04 PM
I have a popup window that can be opened from any page on a site. For the purposes of explaination, let's say it's a shopping cart display. Whenever someone adds an item to the cart from a page, I want to use Javascript to tell the popup to update itself.

The way this site works, there may be many pages open that can select items in different browser windows at the same time and they all need to be able to tell the popup to update itself. As a fallback, the popup will use AJAX to periodically check for updates, but if it could update instantly, it would be better.

Any ideas?


call.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var ajax = {
focus : function() {
// You can update the code when they
// focus on the window. No reference
// is neccessary.
var x = document.getElementById('tiger');
x.value = parseInt(x.value) + 1;
}
}
</script>
</head>
<body onfocus="ajax.focus();">
<input type="text" value="0" id="tiger" />
Use php to call session data right here!
</body>
</html>


index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function startup() {
popup = window.open('call.htm','YOU RANG','height=100,width=250');
popup.window.focus;
}
</script>
</head>
<body onload="javascript:startup();">
STARTED!
</body>
</html>

This is the simplest and only way to go about doing what you want to do. Keeping a reference, is unrealistic, as it will be lost upon changing pages. Unless all pages are loaded via AJAX. If you do that, then sure, you can use a reference using opener to alter the data.