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]

ja*********@gma il.com wrote:

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]

On Jun 21, 6:12 am, kaaposc <[e-mail] rote:

jackwoot...@gma il.com wrote:

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

Hello kaaposc,

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

[RobG]

On Jun 21, 7:57 pm, "jackwoot...@gm ail.com" <jackwoot...@gm ail.com>
wrote:

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-Eve...-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/tutoria...ript/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="applicati on/javascript">

// Add a DOMNodeInserted listener
function addME(id){
var el = document.getEle mentById(id);
el.addEventList ener('DOMNodeIn serted', sayHi, true);
}

// Modify the DOM
function modDOM(id) {
var el = document.getEle mentById(id);
el.appendChild( document.create TextNode('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.
--
Rob

[jackwootton]

On Jun 21, 9:37 am, RobG <[e-mail] .auwrote:

On Jun 21, 7:57 pm, "jackwoot...@gm ail.com" <jackwoot...@gm ail.com>
wrote:

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-Eve...-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="applicati on/javascript">

// Add a DOMNodeInserted listener
function addME(id){
var el = document.getEle mentById(id);
el.addEventList ener('DOMNodeIn serted', sayHi, true);
}

// Modify the DOM
function modDOM(id) {
var el = document.getEle mentById(id);
el.appendChild( document.create TextNode('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.

--
Rob

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?