onChange event when div content changed

[Hipnotik]

Hi
How to call some action if content of the div element has changed?

I'm talking about something like this:
$("my-div").observe("change", function(e) {
alert("hello");
});

Expecting behavior:
I have this
<div id="my-div">some text</div>

now I'm changing "some text" to "some other text" and "alert("hello")"
should be fired.

Thnaks for help.

[Walter Lee Davis]

There's no reliable cross-browser event that gets fired when the
content of a DIV (as opposed to a form element, say) changes. One
thing you might try would be to have a PeriodicalExecuter running.
Have it compare a global variable with the current innerHTML of that
DIV, and if they don't match, fire the event and update the global
variable. This may be more difficult than I am saying it here, it's
often quite hard to get a PE to gather an external variable value more
than once (at the moment the PE function is instantiated).

Walter

[Hipnotik]

Thanks Walter!
I would like to avoid of using PE and global variable to store current
innerHTML. I thought that it will be quiet easy and any trick can help
me...
There is other way - hidden form field and prototype's observer. But
this solution doesn't satisfy me too.

Anyway, thanks.

[RobG]

There is no change event specified for div elements, what you are
looking for is provided by DOM mutation events:

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

OK in Firefox, Opera, Safari and a few others, but not IE.

Some help here:

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

The best cross-browser strategy is to get the function that modifies
the DOM to call the function you'd like to add as a DOMSubtreeModified
listener.


--
Rob

[Marko Zabcic]

You could use prototype custom events. See example here:
http://jsbin.com/ayiku

But you will have to fire function manually after update or override
default Element.update function to do it for you.

Marko

[Hipnotik]

@RobG
I'm not sure that DOMSubtreeModified works in the IE. I tried to use
it and I think it doesn't.

@Marko
That's the problem... I don't want to fire it manually.

But thanks guys for help.

[Marko Zabcic]

If you override Element.update function it's almost automagically :-)
http://jsbin.com/utuvu

I can't get closer to the solution than this :-)

Marko