Run js when document is changed?

Question

I tried looking for the answer, and this is my first post, so bear with me if I mess up in some way.

Basically my problem is this: I'm writing an extension for Chrome that uses jQuery. I have another extension that makes a timed $.ajax() request every 10 seconds. I need to find a way to run my code every time that timed ajax request and its callback function completes. Setting a timer for my own script can be done, although that's rather half-assed and doesn't work as well.

The problem can be illustrated thus:

//extension 1
function timedFunc() {
   setTimeout(doStuff, 10000);
};
timedFunc();

//extension 2
//code to be run every time doStuff completes

I feel like there may be a very elementary solution to this problem but I appreciate the help.

Take a look at [jQuery deffereds](http://api.jquery.com/category/deferred-object/). — elclanrs, Sep 15 '12 at 23:34
The idea of this is to make my script compatible with the other script's timed page updates. Mine has to work with that, but I cannot access that function directly because they are separate extensions. I could always just do my own timer of 10.1 seconds or something, but that's not very good practice and I would like to know if there is a legitimate way to do this. — , Sep 15 '12 at 23:38

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

There is (was) an event called DOMSubtreeModified. But it has been deprecated so at tho moment there are really only workarounds available.

Why is the DOMSubtreeModified event deprecated in DOM level 3?

I can't advise on using this event as it hasn't even been implemented in all browsers.

But what you can do (easily) is just trigger you own event with all your ajax call!

Example:

fire your event when (any) ajax call completes:

$(document).ajaxComplete(function() {
   $(document).trigger('domChanged');
}

and listen to it:

$(document).on('domChanged',function() {
   alert("i changed the DOM tree!");
});

btw:

taken that you just want to react to ajax calls compleing... just use the .ajaxComplete() event:

http://api.jquery.com/ajaxComplete/

edited May 23 '17 at 12:03

Community

1
1

answered Sep 15 '12 at 23:50

Gung Foo

13,392
5
31
39

.ajaxComplete() doesn't work, because it's a different extension. The functions are unable to communicate or listen for each other, so I just have to find a way to listen for document changes. – Sep 16 '12 at 00:02
then you will probably have to fire the event at the success function(s) of your ajax calls.. Maybe wrap them into a single function? – Gung Foo Sep 16 '12 at 00:08
These are two different extensions; thus, I can't modify anything that the other script does. The other one is not written by me. This whole question is for the sake of my script's compatibility with the one in question. They operate in two separate contexts, so I can't listen for ajax calls or anything -- the only thing I can do is check for the changes that the function makes, or any sort of change at all. I just need a way to listen for said changes, like document.change or something. Sounds like there's no real solution to this problem... – Sep 16 '12 at 00:12

score 0 · Answer 2 · answered Sep 15 '12 at 23:51

i didn't really understand what you are trying to say but i did understand your question in the title so here is my modest answer:

// a global variable for the documents content
var content=document.documentElement.innerHTML;

// return true if the document content has changed
function documentChanged(){
return content==document.documentElement.innerHTML;
}

Run js when document is changed?

2 Answers2