By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

How to Update a Div Only When Window Receives Focus

P: n/a
I have an AJAX enabled page which contains a list of records out of a
database which are loaded into a div via an AJAX call.

If the user switches to another window, and comes back to this open
window later on, I want the list of records to be udpated when the
window is back in front

a simple onFocus doesn't work, as what happens is that if a button is
clicked on the window it causes the onfocus to fire as well

I've tried (unsuccessfully) to block onfocus events from reaching the
window object from other objects (like buttons or images), but I can't
seem to get this to work

I just want the div to reload if the window gains focus!!!!!

there is surely something simple I am missing????

Sep 11 '06 #1
Share this Question
Share on Google+
8 Replies


P: n/a
VK
zacware wrote:
If the user switches to another window, and comes back to this open
window later on, I want the list of records to be udpated when the
window is back in front
Then you need to monitor window.onfocus/onblur, not your div.

function notifyListeners() {
// update your DIV's
}

window.onfocus = notifyListeners;

Sep 11 '06 #2

P: n/a
"zacware" <za*****@comcast.netwrote in message
news:11*********************@i3g2000cwc.googlegrou ps.com...
I have an AJAX enabled page which contains a list of records out of a
database which are loaded into a div via an AJAX call.

If the user switches to another window, and comes back to this open
window later on, I want the list of records to be udpated when the
window is back in front

a simple onFocus doesn't work, as what happens is that if a button is
clicked on the window it causes the onfocus to fire as well

I've tried (unsuccessfully) to block onfocus events from reaching the
window object from other objects (like buttons or images), but I can't
seem to get this to work

I just want the div to reload if the window gains focus!!!!!

there is surely something simple I am missing????

Will this help? Watch for word-wrap.

<html>
<head>
<title>winfocus.htm</title>
<script type="text/javascript">
function fokus() {
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus;
window.onfocus = fokus;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
</body>
</html>
Sep 11 '06 #3

P: n/a
that's what I've done, the problem is that if I click on a button on
that page, the onfocus event from the button bubbles up to the window
object and refreshes the page too

I seem to have an event bubbling problem, and I am trying to figure out
how to only reload the div when the onfocus event is specifically
because of the window getting focus rather than a child element of the
window getting focus and trickling the event down to the window object.
McKirahan wrote:
"zacware" <za*****@comcast.netwrote in message
news:11*********************@i3g2000cwc.googlegrou ps.com...
I have an AJAX enabled page which contains a list of records out of a
database which are loaded into a div via an AJAX call.

If the user switches to another window, and comes back to this open
window later on, I want the list of records to be udpated when the
window is back in front

a simple onFocus doesn't work, as what happens is that if a button is
clicked on the window it causes the onfocus to fire as well

I've tried (unsuccessfully) to block onfocus events from reaching the
window object from other objects (like buttons or images), but I can't
seem to get this to work

I just want the div to reload if the window gains focus!!!!!

there is surely something simple I am missing????


Will this help? Watch for word-wrap.

<html>
<head>
<title>winfocus.htm</title>
<script type="text/javascript">
function fokus() {
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus;
window.onfocus = fokus;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
</body>
</html>
Sep 11 '06 #4

P: n/a
"zacware" <za*****@comcast.netwrote in message
news:11**********************@m73g2000cwd.googlegr oups.com...
that's what I've done, the problem is that if I click on a button on
that page, the onfocus event from the button bubbles up to the window
object and refreshes the page too

I seem to have an event bubbling problem, and I am trying to figure out
how to only reload the div when the onfocus event is specifically
because of the window getting focus rather than a child element of the
window getting focus and trickling the event down to the window object.

This example doesn't have that problem.
Could you provide one that does?

<html>
<head>
<title>winfocus.htm</title>
<script type="text/javascript">
function fokus() {
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus;
window.onfocus = fokus;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
<br><br><br>
<input type="button" value="clicking doesn't reload page">
</body>
</html>
Sep 11 '06 #5

P: n/a
add an img tag with an onclick handler in it, when you click on the
image the window's focus event will fire and the date will update

McKirahan wrote:
"zacware" <za*****@comcast.netwrote in message
news:11**********************@m73g2000cwd.googlegr oups.com...
that's what I've done, the problem is that if I click on a button on
that page, the onfocus event from the button bubbles up to the window
object and refreshes the page too

I seem to have an event bubbling problem, and I am trying to figure out
how to only reload the div when the onfocus event is specifically
because of the window getting focus rather than a child element of the
window getting focus and trickling the event down to the window object.


This example doesn't have that problem.
Could you provide one that does?

<html>
<head>
<title>winfocus.htm</title>
<script type="text/javascript">
function fokus() {
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus;
window.onfocus = fokus;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
<br><br><br>
<input type="button" value="clicking doesn't reload page">
</body>
</html>
Sep 11 '06 #6

P: n/a
"zacware" <za*****@comcast.netwrote in message
news:11**********************@q16g2000cwq.googlegr oups.com...
add an img tag with an onclick handler in it, when you click on the
image the window's focus event will fire and the date will update
It didn't for me under IE5.5 but under Firefox it updates the time
wherever I click on the page.

<html>
<head>
<title>winfocus.htm</title>
<script type="text/javascript">
function click() {
alert("click!");
}
function fokus() {
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus;
window.onfocus = fokus;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
<br><br><br>
<img src="clear.gif" border="1" width="20" height="20" onclick="click()">
</body>
</html>

What browser (and version) are you testing with?
Sep 11 '06 #7

P: n/a
FireFox 1.5, so I guess this is a browser specific issue!
McKirahan wrote:
"zacware" <za*****@comcast.netwrote in message
news:11**********************@q16g2000cwq.googlegr oups.com...
add an img tag with an onclick handler in it, when you click on the
image the window's focus event will fire and the date will update

It didn't for me under IE5.5 but under Firefox it updates the time
wherever I click on the page.

<html>
<head>
<title>winfocus.htm</title>
<script type="text/javascript">
function click() {
alert("click!");
}
function fokus() {
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus;
window.onfocus = fokus;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
<br><br><br>
<img src="clear.gif" border="1" width="20" height="20" onclick="click()">
</body>
</html>

What browser (and version) are you testing with?
Sep 11 '06 #8

P: n/a
"zacware" <za*****@comcast.netwrote in message
news:11**********************@p79g2000cwp.googlegr oups.com...
FireFox 1.5, so I guess this is a browser specific issue!
Don't run this under Firefox....
You'll have to use Ctrl+Alt+Delete to end the task!

<html>
<head>
<title>winfocus.html</title>
<script type="text/javascript">
function click() {
alert("click");
}
function fokus1() {
alert("onload");
document.getElementById("when").innerHTML = new Date();
}
function fokus2() {
alert("onfocus");
document.getElementById("when").innerHTML = new Date();
}
window.onload = fokus1;
window.onfocus = fokus2;
</script>
</head>
<body>
<div id="when" style="font-family:Arial"></div>
<br>
<img src="clear.gif" border="1" width="20" height="20" onclick="click()">
</body>
</html>
Sep 12 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.