DOM not updated when refreshing or changing page?

philippelr

Hello everyone,

I've searched hours and hours to solve this issue and I didn't find anything very helpful beside fully rewriting my code...
So... Hopefully you can help me with my issue.

I am retrieving data from an external Web Services with complexes types and I have to display them in a table.
Before using DataTables, what I did was build up my rows using jQuery syntax like:

var instance_row = $('<tr>')
    .attr("row_id", instance.InstanceId)
    .append($('<td>').attr("class","td_name")
            .append($('<input>')
                    .attr("id", "instance_name_"+instance.InstanceId)
                    .attr("type", "text") ...

I've added the DataTable using:

dataTable = $('#ec2_instances').DataTable({
                columnDefs: [
                     { "type": "html-input", "targets": [0, 5] },
                     { "orderable": false, "targets": [6] }
                  ],
                  bDestroy: true
              });

Now, it works just fine... But here is the trick (finally !):

I want to be able to toggle edit mode on my rows. Meaning: When clicking on an icon, I want to be able to edit the row and save it.
That works just fine. But when I refresh the table or when I change the page, the edit mode is still on !! But the data in my input text has the new value.

Here is a video that shows the issue:
https://www.youtube.com/watch?v=tVFg310woIQ

Any help would be appreciated.

Thanks

Philippe