update listener for element?

[jackwootton]

Hello,

Currently I use setInterval to call a function every 1.5 seconds. The
function checks the content of 6 divs on a page. The content of each
div is retrieved use innerHTML. If the content of the div has changed
since it was last checked (1.5 seconds previous), then I know the div
has been updated, and I need to do something.

My questions is: This seems to be a resource heavy and rather clunky
way of checking if a div has been updated. What I'd really like is to
be able to attach a listener to a div, the listener is triggered when
the div is updated.

Is there anyway of doing this? If not, is there anyway I could improve
my current method?

Many thanks,

Jack Wootton

 

[kaaposc]

Hello,

Currently I use setInterval to call a function every 1.5 seconds. The
function checks the content of 6 divs on a page. The content of each
div is retrieved use innerHTML. If the content of the div has changed
since it was last checked (1.5 seconds previous), then I know the div
has been updated, and I need to do something.

My questions is: This seems to be a resource heavy and rather clunky
way of checking if a div has been updated. What I'd really like is to
be able to attach a listener to a div, the listener is triggered when
the div is updated.

Is there anyway of doing this? If not, is there anyway I could improve
my current method?

well you could attach function to ajax object itself so it will be
triggered when that object updates div..

 

[jackwootton]

well you could attach function to ajax object itself so it will be
triggered when that object updates div..

Hello kaaposc,

Thank you for replying, unfortunately I do not understand your
answer. I am not using AJAX.
Please could you elaborate?

 

[RobG]

Hello,

Currently I use setInterval to call a function every 1.5 seconds. The
function checks the content of 6 divs on a page. The content of each
div is retrieved use innerHTML. If the content of the div has changed
since it was last checked (1.5 seconds previous), then I know the div
has been updated, and I need to do something.

The obvious solution is to have whatever function or functions that
modify the DOM to call your function that should operate when the DOM
is modified.

Failing that, you can use the DOM 2 mutation event interface:

<URL: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent
Support is very poor - Firefox 2 & Opera 9 support some of it[1],
Safari 3 a bit more, IE probably very little if any. There is a good
page on events here:

<URL: http://www.howtocreate.co.uk/tutorials/javascript/domevents >


A trivial example of having an event fire when a DOM node is
inserted. Try it in one of the browsers named above, it will not work
in IE:

<script type="application/javascript">

// Add a DOMNodeInserted listener
function addME(id){
var el = document.getElementById(id);
el.addEventListener('DOMNodeInserted', sayHi, true);
}

// Modify the DOM
function modDOM(id) {
var el = document.getElementById(id);
el.appendChild(document.createTextNode('blah'));
}

// Trivial function to call
function sayHi() {alert('hi');}

</script>

<input type="button" value="Set listener" onclick="addME('xx');">
<input type="button" value="Modify DOM" onclick="modDOM('xx');">
<div id="xx">DOM Node to modify<br></div>


1. I suspect new versions of Fx and Opera will support more of it.

 

[jackwootton]

Hello,

Currently I use setInterval to call a function every 1.5 seconds. The
function checks the content of 6 divs on a page. The content of each
div is retrieved use innerHTML. If the content of the div has changed
since it was last checked (1.5 seconds previous), then I know the div
has been updated, and I need to do something.

The obvious solution is to have whatever function or functions that
modify the DOM to call your function that should operate when the DOM
is modified.

Failing that, you can use the DOM 2 mutation event interface:

<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent



Support is very poor - Firefox 2 & Opera 9 support some of it[1],
Safari 3 a bit more, IE probably very little if any. There is a good
page on events here:

<URL:http://www.howtocreate.co.uk/tutorials/javascript/domevents>

A trivial example of having an event fire when a DOM node is
inserted. Try it in one of the browsers named above, it will not work
in IE:

<script type="application/javascript">

// Add a DOMNodeInserted listener
function addME(id){
var el = document.getElementById(id);
el.addEventListener('DOMNodeInserted', sayHi, true);
}

// Modify the DOM
function modDOM(id) {
var el = document.getElementById(id);
el.appendChild(document.createTextNode('blah'));
}

// Trivial function to call
function sayHi() {alert('hi');}

</script>

<input type="button" value="Set listener" onclick="addME('xx');">
<input type="button" value="Modify DOM" onclick="modDOM('xx');">
<div id="xx">DOM Node to modify<br></div>

1. I suspect new versions of Fx and Opera will support more of it.

Hello Rob,

This is great thank you. I cannot use method 1, since I am actually
listening for an update on a div element that is not written by me. I
am writing a Fireffox extension, and need to listen for divs on a
specific page in a tab. When those divs are updated, the extension
needs to do something. So my idea is to use the 3nd method you
describe, to listen for the divs being updated. My extension code
will then be notified that an update has occurred. Is this correct?