Save html instance after update

Question

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

Farhan Tahir · Accepted Answer · 2018-05-17 08:50:01Z

3

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.

answered May 17, 2018 at 8:50

Farhan Tahir

2,1441 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raghav Patnecha Over a year ago

Yeah, But the thing is the table is rendered using pandas form a excel file and I need to save the updates state. Thats why I am sending the page source

Alex · Accepted Answer · 2018-05-17 08:50:42Z

0

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.

answered May 17, 2018 at 8:50

Alex

2,2321 gold badge12 silver badges28 bronze badges

Collectives™ on Stack Overflow

Save html instance after update

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related