CODEWITHSUNDEEP
javascriptdatatables
Raghav Patnecha
Raghav Patnecha

Reputation: 736

Save html instance after update

I have this html data-table where each table cell is editable. I can edit the cell value and it is saved temporary. But when I update the page it is lost. So I tried to save the html instance in excel file so that I can see the updated cell in future.

Below function shows me the edited value in console

$(document).ready(function() {
  var table = $('#example').DataTable();
  table.MakeCellsEditable({
    "onUpdate": myCallbackFunction

  });

  function myCallbackFunction(updatedCell, updatedRow, oldValue) {
    console.log("The new value for the cell is: " + updatedCell.data());
    console.log("The old value for that cell was: " + oldValue);
    console.log("The values for each cell in that row are: " + updatedRow.data());
    updatedCell.data();
    updatedRow.data();
    table.draw();
  }
});

And This is my Ajax for calling python function:

$("#sa").click(function() {
  $.ajax({
    url: '/save',
    type: 'POST',
    success: function(response) {
      alert('ok')
    }
  })
});

And Basically my python function takes a takes the source code of page and save it in excel. But the thing is my table is getting edited but the script is saving the old values. When I it using chromes inspect element I can see the updates value but when I see it using View page source I see the old values.

Can anybody tell how can I take the updated html page source and send it using ajax

Upvotes: 0

Views: 258

Answers (2)

Alex
Alex

Reputation: 2232

Look into DataTables State saving, it's an option in the plugin [stateSave: true] which uses localstorage and sessionStorage to retain the state of your table.

Example:

$(document).ready(function() {
    $('#example').DataTable( {
        stateSave: true
    } );
} );

Since the state is saved, you can simply retrieve the data everytime you reload the page.

Upvotes: 0

Farhan Tahir
Farhan Tahir

Reputation: 2134

The main difference between page sourceand inspect element is:

Page Source shows what server initially responded, that is the actual sent HTML from the server.

Inspect Element is showing the current state of the DOM after JS manipulation.

DOM is generated using the entire initial page's source/HTML.

That's why your page source will always be the same.

What you can do is post the html content of document in your ajax to get the latest page source.

The following should help you in getting updated DOM source as string:

document.documentElement.innerHTML

Though not sure why you need to post source as you can only post updated values and update database accordingly.

Upvotes: 3

Related Questions