Detecting new tr or content change

Question

I have a bunch of tr, that represent a cart

<tr class="cart_row">
  <td>Product</td>
  <td>£20</td>
  <td>2</td>
</tr>
<tr class="cart_row">
  <td>Product 2</td>
  <td>£50</td> 
  <td>1</td>
</tr>

This gets updated via ajax when an item has been added.

What I'm looking to do, is to detect when the cart has been updated, i.e a new <tr> with a class of cart_rowor if the contents of an existing <tr> has been updated

Can I do this with jQuery?

Thanks

It would be easier to just hook into the success callback of the ajax function that does the updating, as there is no reliable event to use for this (you could use mutation events / observers, but why ?) — adeneo, Jan 12 '14 at 20:27
I have a success in the ajax callback, I just need an esy way to detect whether or not these ``s have changed or if a new one has been added to the dom — sipher_z, Jan 12 '14 at 20:37
Have you checked my answer? if you post your ajax code I can adapt it better. — Sergio, Jan 12 '14 at 20:38
@Sergio it is just a simple on click of a button. It passes in a 'item_id' if there is a number in the quantity, it adds a row or updates the item in a cart sidebar — sipher_z, Jan 12 '14 at 20:40
Well, then you have a function with a condition already, and you know wether or not any elements where inserted, why do you need another function to check if the elements are really there, when you're the one inserting them. — adeneo, Jan 12 '14 at 20:42
Updated my example with a Ajax example, please check (click twice) — Sergio, Jan 12 '14 at 21:01

Sergio · Accepted Answer · 2014-01-12T21:00:36.500

0

I would suggest this:

// a function to make a string out of thew data
function getData() {
    var data = $('tr.cart_row td').map(function (el) {
        return this.innerHTML;
    }).get().toString();
    return data;
}

//before the Ajax:
var valuesBefore = getData();

// do Ajax

//after the Ajax, ideally inside the callback (remeber ajax is async)
if (valuesBefore != getData()){ //do something };

Example

edited Jan 12 '14 at 21:00

answered Jan 12 '14 at 20:25

Sergio

28,539
11
85
132

but this will always compare html before any ajax call, and html after each ajax call. If you can do more than one ajax call, you would like to compare between ajax call and ajax call-1, no (if that's understandable) ? So doing this in success callback before updating dom would be better, I think. – Raphaël Althaus Jan 12 '14 at 20:33
@RaphaëlAlthaus, sure. Difficould to know when OP didn't post any code for ajax. – Sergio Jan 12 '14 at 20:36
@RaphaëlAlthaus, added a example with ajax echo. – Sergio Jan 12 '14 at 21:07

score 0 · Answer 2 · answered Jan 12 '14 at 20:27

0

You can, with this:

$("#yourTable").on("DOMSubtreeModified", function() {
    alert("table changed! row added");
});

See the browser support here: http://www.quirksmode.org/dom/events/#t18

EDIT However, it's getting deprecated

Hope this helps. Cheers

answered Jan 12 '14 at 20:27

Edgar Villegas Alvarado

18,204
2
42
61

http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 – Sergio Jan 12 '14 at 20:28
I had a feeling, wasn't sure either but went to look now and found it. Also learned. – Sergio Jan 12 '14 at 20:31

score -1 · Answer 3 · answered Jan 12 '14 at 20:23

-1

As far as I know, there is no event for this action. You should implement this with the help of setTimeout function. Set a function which checks if the count of needed elements changes.

answered Jan 12 '14 at 20:23

Dima Knivets

2,418
7
28
40

You case will not work, if item was added then other removed, + there is events which you can catch on item added, deleted etc. – Vova Bilyachat Jan 12 '14 at 20:55

Detecting new tr or content change

3 Answers3

Example