Observe div content change?

[Yozefff]

Is it possible to observe when the content of a DIV is changed?

So for example, I update the innerHTML (ajax perhaps?) and some JS
class is listening when the content is changed.

[Nahuel Bulian]

That sound good, could you provide me an example?

2009/4/22 Yozefff <yoz...@gmail.com>

Is it possible to observe when the content of a DIV is changed?

So for example, I update the innerHTML (ajax perhaps?) and some JS
class is listening when the content is changed.

--
Saludos
NB.
MSN: NBu...@GMail.com
GTalk: NBu...@GMail.com

Antes de imprimir, pensá en el medio ambiente.
Before printing, think about the environment.
Avant d'imprimer, pensez à l'environnement.

[Nahuel Bulian]

Let me to be clear with the issue, my code looks in that way:

<div id='dropdown'>
<select name="category"><option></option></select>
</div>
When the select change the DIV container is reload.

<div id='container'>
The page load here has the PeriodicalUpdater
</div>
The code load here works fine, and stop when some part of the code in the success function is triggered, the issue is presented if I change the dropdown before the stop method is called, the div is reload with another page and the PeriodicalUpdater charged before is still running.


I hope to be clear, this is driving me crazy!
NB.

2009/4/22 Nahuel Bulian <nbu...@gmail.com>

[Ananth Raghuraman]

$("your element id").observe("DOMCharacterDataChanged",function(evt){
   //your code here
});

Try above

Check the Event.Observe documentation on prototype api documentation website.
This website gives you a link to DOM 2 Events list. Check the Mutation Events section.

[Matt Foster]

Anath's idea would be ideal but I am not sure how supported that event
actually is.

Alternatively, it'd be a bit more work but still would satisfy your
event requisite of just firing off you own event when you update.

var oldHTML = ele.innerHTML;

ele.update(text);

ele.fire("x:update", { oldHTML : oldHTML });

http://prototypejs.org/api/element/fire



--

http://positionabsolute.net

On Apr 22, 10:33 am, Ananth Raghuraman <araghuram...@gmail.com> wrote:
> $("your element id").observe("DOMCharacterDataChanged",function(evt){
>    //your code here
>
> });
>
> Try above
>
> Check the Event.Observe documentation on prototype api documentation
> website.
> This website gives you a link to DOM 2 Events list. Check the Mutation
> Events section.
>

[RobG]

On Apr 22, 9:02 pm, Yozefff <yoze...@gmail.com> wrote:
> Is it possible to observe when the content of a DIV is changed?

The W3C DOM 2 Events specification has an Interface MutationEvent for
that purpose (and others). Support may vary across browsers:

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


--
Rob

[Yozefff]

hmm no luck :(

<a href='javascript:test()'>test</a>



<div id='myDiv'></div>

<script>

function test(){
$("myDiv").update("yo");
}


$("myDiv").observe("DOMCharacterDataChanged",function(evt){
alert("sup");

});


The domcharacdatachanged event just won't fire (FF3)

[Ananth Raghuraman]

I think it is

DOMCharacterDataModified

not

DOMCharacterDataChanged (Sorry I gave the wrong even name earlier)

[RobG]

On Apr 24, 2:03 am, Yozefff <yoze...@gmail.com> wrote:
> hmm no luck :(
>
> <a href='javascript:test()'>test</a>
>
> <div id='myDiv'></div>
>
> <script>
>
> function test(){
> $("myDiv").update("yo");
> }
>
> $("myDiv").observe("DOMCharacterDataChanged",function(evt){
> alert("sup");
>
> });
>
> The domcharacdatachanged event just won't fire (FF3)

The mutation events are listed at the reference I provided,
DOMCharacterDataChanged isn't one of them.

You should test for support before attempting to use them as
attempting to set an unsupported event is supposed to throw an
exception. The official way to detect support is using hasFeature,
but that is insufficient as there is no allowance for partial
implementation (and browsers lie anyway), e.g.:

document.implementation.hasFeature('MutationEvents', '2.0')

shows false in Firefox even though some mutation events are supported
That is the correct response according to the DOM 2 Events spec as it
should only show true if *all* relevant events are supported, but it's
pretty useless for finding out bits are supported and what aren't.

IE shows false for Events 2.0, so there's no point even trying testing
for MutationEvents as support for Events is a prerequisite. The only
reliable strategy I have found for detection is to use try..catch and
see what happens. If an error is thrown, the event isn't supported.
E.g. to test if you can create a mutation event:

window.onload = function () {
var eventType = 'DOMCharacterDataModified';
var el = document.createElement('div');

// Test createEvent
try {
el.createEvent(eventType);
alert('createEvent ' + eventType + '\nOK');
} catch (e) {
alert('createEvent ' + eventType + '\nNot supported.');
}

// Test addEventListener
try {
el.addEventListener(eventType, sayHi2, true);
alert('addEventListener ' + eventType + '\n OK');
} catch (e) {
alert('addEventListener ' + eventType + '\nNot supported.');
}
}

The above shows that DOMCharacterDataModified is not supported by
createEvent, but is OK with addEventListener. You need to test after
the onload event has fired else it will return false, even in Firefox.


--
Rob