Catch changes in dynamicly updated tables

Question

I have a page that loads tables dynamically. I want to check if any of the tds contain a keyword, and depending on that change some CSS styling.

On first load everything works well, but when something changes in the table, my function doesn't get triggered.

Here is my code. The 1st block works well, but the 2nd doesn't?

 $( document ).ready(function() {
        $("tr td:contains('*')").each(function(){
            $(this).parent("tr").css({ "background-color": "red" });
            $(this).parent().children().css({ "background": "inherit" });
        });
    });

jQuery('body').on('change', '.content', function () {
    $("tr td:contains('*')").each(function(){
        $(this).parent("tr").css({ "background-color": "red" });
        $(this).parent().children().css({ "background": "inherit" });
    });
});

`.content` is of course form elements where the value changes by selecting or typing something ? If you're just trying to ***filter*** out elements with no content, a filter checking the length would be better. — adeneo, Oct 02 '13 at 12:43
Ofcoars, there are cells containing "*" :) and .content is table wraper... — vdevcic, Oct 02 '13 at 12:57
If an alert within the second block gets fired, try placing an alert inside the `each` callback inside of the second block. That will tell you if your selector is matching anything. — Ishmael Smyrnow, Oct 02 '13 at 13:14
It does get fired if i put it inside 'each' callback, now i really dont get it?? — vdevcic, Oct 02 '13 at 13:21

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

If I understand correctly, you're attempting to listen for changes in the table itself, meaning inner html changes, added rows, etc.

Unfortunately, the reason you're not seeing the change event firing is because that event only fires when the value of the element is changed; there is no such property for tables, rows and cells.

From jQuery's documentation on the change event, found here:

This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

The reason why it works the first time is because, of course, you're not wrapping it in the change event; it is firing immediately when your on-ready function fires. Your selector works fine, of course, the table is simply never firing the event you're looking for.

I've not personally done this myself, but one solution found on SO can be seen here, which involves setting up a type of poller which constantly checks whether anything has changed. It also explains how you can then set up a custom event, which you can fire, thus further separating your code into manageable pieces.

Apparently they also discuss using jqGrid, which has a refresh event you may want to consider as well.

Hope that helps.

Edit

You might also be able to make use of the MutationObserver, whose documentation can be found here, and what looks like a pretty good example of its use on SO here. In the SO example, the poster indicates they tested it on browsers as far back as IE 7, however according to this, MutationObserver is not 100% compatible by itself (maybe he uses a polyfill), so make sure you test it properly.

score 0 · Answer 2 · answered Oct 02 '13 at 12:45

0

Wrap the on change function with document.ready

$(function(){
/*code*/
});

answered Oct 02 '13 at 12:45

Anton

32,245
5
44
54

I tried but it doesn't change anything, problem is that i do catch that something changed (if i put alert and change something, alert gets triggered) but rest of code is not working... and the some code work on document.ready! – vdevcic Oct 02 '13 at 13:00
There is live version on: http://www.rak-rijeka.org/clanovi_auth/home.php username:gost pass:rakclanovi When page is loaded one user is red, but if you change page and return back, he want be any more... – vdevcic Oct 02 '13 at 13:13
I just realized it doesn't get triggered if you use pagination, but if you change how many records per page you see it will be triggered. But the problem remains the same. – vdevcic Oct 02 '13 at 13:24
@vdevcic ah i see what you mean, try to call the function everytime you go to a new page, after you load the new users. – Anton Oct 02 '13 at 13:24

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

Thanks everybody for your help, i found solution using custom build plugin that i found here:

jQuery watch div

It works like a charm for me!

edited May 23 '17 at 12:13

Community

1
1

answered Oct 03 '13 at 07:57

vdevcic

23
4

Catch changes in dynamicly updated tables

3 Answers3