Check if the webpage has been modified

Question

I am working on chrome extension for facebook. If you use facebook, you know that when you scroll down to the bottom of the news feed/timeline/profile it shows more posts. The extension actually adds a button beside the "like" button. So I need to check if there are more posts to add that button to.

Right now to check if the page has been modified, I use setInterval(function(){},2000). I want to run a function when the user clicks the button. But this function doesn't work if I put it outside (or even inside) setInterval() – The Koder just now edit

How can I check if the webpage has been modified WITHOUT using a loop?

Example:

$(document).ready(function(){
    window.setInterval(function(){
          $(".UIActionLinks").find(".dot").css('display','none');
          $(".UIActionLinks").find(".taheles_link").css('display','none');
          $(".miniActionList").find(".dot").css('display','none');
          $(".miniActionList").find(".taheles_link").css('display','none');
              //only this function doesn't work:
          $(".taheles_link").click(function(){
            $(".taheles_default_message").hide();
            $(".taheles_saving_message").show();
          });
               //end
          $(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל&acute;ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="taheles_default_message">תכל&acute;ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
          $(".taheles_saving_message").hide();
    }, 2000);
});

In the future, this extension will use AJAX, so setInterval() can make even more problems for me.

What do you mean by "want to run more function WHILE setInterval() is running"? I don't quite get what it is you're trying to do. Maybe an example will help us understand — Koen Peters, May 19 '12 at 12:24
I want to run a function when the user clicks the button. But this function doesn't work if I put it outside (or even inside) setInterval() — Nadav S., May 19 '12 at 12:25
So, you mean that you have a click handler function that you connect to the buttons 'click' event but that does not fire when you click it? — Koen Peters, May 19 '12 at 12:29
In the future it will use AJAX so `setInterval()` can make more problems. What do you think? — Nadav S., May 19 '12 at 12:32

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

If I understand correctly you want to get a notification when the page's DOM changes. And you want to do this without using the setInterval() function.

As your problem lies within the attaching event handlers to elements that are created after the page has loaded, you might be interested in checking out the jquery.live event attachment technique. I think it will solve your issue.

In general you want the page to throw a mutation event. There is a mutation event spec that might be what you're looking for. Here are some links that might be useful.

edited May 23 '17 at 12:04

Community

1
1

answered May 19 '12 at 12:36

Koen Peters

12,798
6
36
59

Important update: everyone using mutation events should switch right now to mutation observers. See [question](http://stackoverflow.com/questions/11425209/are-dom-mutation-observers-slower-than-dom-mutation-events), [Mozilla reference](https://developer.mozilla.org/en-US/docs/DOM/MutationObserver?redirectlocale=en-US&redirectslug=DOM%2FDOM_Mutation_Observers) – Nadav S. Nov 21 '12 at 19:36

score 0 · Answer 2 · edited Jul 18 '12 at 09:46

0

$(document).ready(function(){
    setInterval('fun()',5000);
    fun();
});
function fun()
{
    alert(11)
}

edited Jul 18 '12 at 09:46

bluish

26,356
27
122
180

answered May 19 '12 at 12:38

pankil thakkar

411
1
5
15

Check if the webpage has been modified

2 Answers2