I am trying to update a row in a datatable using editable cells. It works to update on the interface but the data does not go into the api and after I reload the page the modification dissapear.
function buildlist() {
var url = 'http://127.0.0.1:8000/api/sarcini-list/';
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
var table
const createdCell = function(cell) {
let original;
cell.setAttribute('contenteditable', true)
cell.setAttribute('spellcheck', false)
cell.addEventListener("focus", function(e) {
original = e.target.textContent
})
cell.addEventListener("blur", function(e) {
if (original !== e.target.textContent) {
const row = table.row(e.target.parentElement);
$.ajax({
type: "PUT",
url: 'http://127.0.0.1:8000/api/sarcini-detail/' + row.data().idSarcina,
data: row.data()
})
console.log('Row changed: ', row.data())
}
})
}
table = $('#datatable').DataTable({
columnDefs: [{
targets: '_all',
createdCell: createdCell
}],
scrollX: true,
data: data,
columns: [
{ data: 'idSarcina' },
{ data: 'nr_tren' },
{ data: 'nr_locomotiva' },
{ data: 'plecare' },
{ data: 'ora_plecare1' },
{ data: 'ora_sosire1' },
{ data: 'angajat1' },
{ data: 'angajat2' },
{ data: 'schimb1' },
{ data: 'ora_plecare2' },
{ data: 'ora_sosire2' },
{ data: 'angajat3' },
{ data: 'angajat4' },
{ data: 'schimb2' },
{ data: 'ora_plecare3' },
{ data: 'ora_sosire3' },
{ data: 'angajat5' },
{ data: 'angajat6' },
{ data: 'sosire' },
{ data: 'ora_plecare4' },
{ data: 'ora_sosire4' },
{ data: 'angajat7' },
{ data: 'angajat8' }
],
});
}
)
}
)
}
$(document).ready(function() {
buildlist();
});
I modified the field "NUMAR TREN" and as you can see in the console in the api the change does not take place but in the interface it looks ok.