0

I'm attempting to detect if the state of each td element changes every 34 seconds.

How it currently works:

  1. I have a PHP page that converts an array of data into a table
  2. On the page that displays the table, I have a Js file connected that refreshes the div every 34 seconds
  3. On refresh I'm checking each td element if it has changed value, but it's not working

Here's what I've currently put together, but the background color isn't changing:

setInterval(function() {

        $.ajax({
            url: 'http://localhost:8888/profitmanager/wp-content/plugins/football-stats/update.php'
        }).done(function(){
            $('.fbs_results').load(location.href+" .fbs_results>*","");
            $('.fbs_results table tr td').each(function(){
                var td = $(this);
                $(td).on("DOMSubtreeModified", function(){
                    $(td).css('background-color', 'yellow');
                });
            });
        });
    }, 34000);

I thought it might be down to event delegation, but then I wouldn't know how to action that into my current script.

Any ideas?

TIA

  • Use `MutationObserver` – fiveelements Aug 17 '19 at 14:26
  • @fiveelements do you have an example? –  Aug 17 '19 at 14:27
  • See here [An Example of MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) – fiveelements Aug 17 '19 at 14:28
  • @fiveelements would I include this in an each loop? How to target each td element? How would I convert that to jQuery? Thanks for your help man. –  Aug 17 '19 at 14:46
  • If you could possibly work the example you sent to work alongside what I'm trying to achieve that would be great. What I can see from the example is that it detects, sure - but how do I then do an if statement for each `td` element saying 'if it's changed, change background colour to yellow'. –  Aug 17 '19 at 15:11

0 Answers0