How to Update a Div Only When Window Receives Focus

Z

zacware

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????
 
V

VK

zacware said:
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
Click to expand...

Then you need to monitor window.onfocus/onblur, not your div.

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

window.onfocus = notifyListeners;
 
M

McKirahan

zacware said:
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????
Click to expand...


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>
 
Z

zacware

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.
 
M

McKirahan

zacware said:
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.
Click to expand...


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>
 
Z

zacware

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
 
M

McKirahan

zacware said:
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
Click to expand...

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?
 
M

McKirahan

zacware said:
FireFox 1.5, so I guess this is a browser specific issue!
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JS querySelector addEventListenerer index getElementsByClassName parent div only 1
WIN32 - Update Text in a Window in order to show its size in Pixels and coordinates 0
Creating a direct download div link for pdf file 3
How to Create a random password generator in a separate window 4
window blur event in ie when focus isn't lost 0
How to go about building a crud app when you are a noob 1
Image shifts to the right when export the page to pdf 4
How to set focus to a div? 1

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 153

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top