CODEWITHSUNDEEP
javascriptjquery
vdevcic
vdevcic

Reputation: 23

Catch changes in dynamicly updated tables

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" });
    });
});

Upvotes: 1

Views: 152

Answers (3)

vdevcic
vdevcic

Reputation: 23

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!

Upvotes: 0

Paul Richter
Paul Richter

Reputation: 11072

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.

Upvotes: 1

Anton
Anton

Reputation: 32581

Wrap the on change function with document.ready

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

Upvotes: 0

Related Questions