0

Is it possible to see whether an element has been changed in the DOM?

In my case, I have a table with content editable and an id to access each table rows. I want to know which content has been changed.

<table id="myTable">
…

<td id=“name:1" contenteditable=“true"></td>
<td id=“phone:1” contenteditable="true"></td>
<td id=“address:1” contenteditable=“true"></td>

<td id=“name:2" contenteditable=“true"></td>
<td id=“phone:2” contenteditable="true"></td>
<td id=“address:2” contenteditable=“true"></td>

…
</table>

<input type="hidden" id="inputMyTable" name="inputMyTable">

So far I am using the DOM method to get the value of each cell and send it to the server. Then on the server side, for each row in the I database check if the value has been changed from the db then upgrade the db.

Is there a better way of doing this?

P.S. When I submit the form I send the table values to the server-side code with this script

var data = [];

$("#myTable tr").each(function(rowIndex) {
    $(this).find("td").each(function(cellIndex) {
        data.push($(this).text());
    });
});
$('#inputMyTable').val(data.join(";"));

Then server-side I use $_POST to read the output.

salathe
  • 51,324
  • 12
  • 104
  • 132
clement
  • 3
  • 1
  • JS's DOMSubtreeModified event might be a good start for you. See this answer: http://stackoverflow.com/a/4979828/3334049 – lucasnadalutti Jun 02 '15 at 22:03
  • This would seem to be a purely php question, given that it seems you want to check, in php, whether the values returned by the script have been changed from their default. Or do you want to use JavaScript to only send the changed values to the server? (Either way, you still need to verify on the server.) – David Thomas Jun 02 '15 at 22:20

1 Answers1

0

DOM changes can be tracked in JavaScript with Mutation Observers http://addyosmani.com/blog/mutation-observers/

I would save the changes in an object and send them to the server on focusout

$('[contenteditable]').on('focusout', function(e){prepare_data_and_send_to_server()});

Then make some validation before saving to the database.

kb_
  • 131
  • 8