Row Not Updating

Viewed 35

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.

This is how it looks in console and interface

0 Answers
Related