Issue with datatables for updating a row

maniya

I have this function for updating the row in my datatables, but instead of updating, it is adding a row and also throwing an error on the node where i have to apply the class

function reqUpdate(dataValues, type,rowID) {
  // It's an AJAX method using jQuery

  $.ajax({
    url: 'data.cfm?section=uupdate',
    type: 'POST',
    data : dataValues,
    success: function(response) {
      var _response = JSON.parse(response);
      var table = $('#tblData').DataTable(); // Get the DataTable instance
      $.each(_response.data, function(index, item) {
        // Now you can access each property of the item object
         table.row.add({
          "DT_RowId": "_" + index,
          "Icon": item.Icon,
          "Employee": item.Employee,
          "Type": item.Type,
          "viewIcon": item.viewIcon
        }).draw();
      });
      var row = table.row('#' + rowID); // Get the row
      row.node().classList.add(type == 'reject' ? 'newTabClass' : 'newClass'); -- error here main.js:1328 Uncaught TypeError: Cannot read properties of null (reading 'classList')
      setTimeout(function(){
        row.node().classList.remove(type == 'reject' ? 'newTabClass' : 'newClass'); 
      }, 15000);     
    },
    error: function(err) {
      customSwal('Error',err);
    }
  });
}

how can i make te update instead of add, please guide

kthorngren

how can i make te update instead of add, please guide

Is there a unique piece of data for each row? If yes then you can use row() with the row-selector as a function to select the row that matches the unique data. Then use row().data() to update the row instead of row.add() to add the row.

Cannot read properties of null (reading 'classList')

That suggests var row = table.row('#' + rowID) is not finding the row meaning there isn't a row with the ID of "#" + rowID. It will take some debugging to investigate this further. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

maniya

myy tr shows like this

https://prnt.sc/xg8AWzaHDPzT

so if i am updating the first row, the tr has the id as "_0"

maniya

i have a unique selector, but also the tr is showing the uniqe index numbers which is either 0 to start

kthorngren

I would start by debugging the value of rowID as its passed into the function reqUpdate(). Is it in the format _0?

If you want help debugging please post a link to a test case replicating the issue so we can step through the code.

Kevin

maniya

its not passd as_0, the rowID i am passing is the unique identifier in each row, you mentioned above, but i can't figure out how to run the update in here

maniya

i managed to fix it, with this:

    $.each(_response.data, function(index, item) {
            // Now you can access each property of the item object
            var row = table.row('#' + '_' + index); // Get the row
            if (row.length) { // If the row exists
              row.data({
               "DT_RowId": "_" + index,
              "Icon": item.Icon,
              "Employee": item.Employee,
              "Type": item.Type,
              "viewIcon": item.viewIcon
              }).draw();
            } else { // If the row does not exist
              table.row.add({
                "DT_RowId": "_" + index,
              "Icon": item.Icon,
              "Employee": item.Employee,
              "Type": item.Type,
              "viewIcon": item.viewIcon
              }).draw();
            }
          });
          var rowedited = rowID - 1;
          var row = table.row('#' + '_' +rowedited); // Get the row
          console.log(row);
          row.node().classList.add(type == 'reject' ? 'newTabClass' : 'newClass'); 
          setTimeout(function(){
            row.node().classList.remove(type == 'reject' ? 'newTabClass' : 'newClass'); 
          }, 15000);

-error is on node() where the class is not activated, it does not throw an error in the console but does not highlight the class for 15 seconds

kthorngren

Is the classname added to the row? Which classname is applied? Maybe the CSS selector to highlight th e row is not correct. Again we will need to see the issue to help debug.

Kevin

kthorngren

Maybe this example will help:
https://live.datatables.net/rizonume/1/edit

Kevin

maniya

i tried like this but it is still adding the extra row, you edit is not loading

function reqUpdate(dataValues, type,rowID) {
  // It's an AJAX method using jQuery
  dataValues.dformat = $('.timesheet_application').attr('data-format').toUpperCase();
  $.ajax({
    url: 'z.cfm?section=rowUpdate',
    type: 'POST',
    data : dataValues,
    success: function(response) {
      var _response = JSON.parse(response);
      var table = $('#tblData').DataTable(); // Get the DataTable instance
      $.each(_response.data, function(index, item) {
        // Now you can access each property of the item object
        var row = table.row('#' + '_' + index); // Get the row
        if (row.length) { // If the row exists
          row.data({
            "DT_RowId": "_" + index,
            "Icon": item.CheckBoxIcon,
            "Employee": item.Employee,
            "Type": item.Type,
            "weekending": item.weekending,
            "Submission_Date": item.Submission_Date,
            "Approved": item["Approved"],
            "Date": item["Date"],
            "Totalhours": item.Totalhours,
            "viewIcon": item.viewIcon
          }).draw();
        }
      });
      var rowedited = rowID - 1;
      var row = table.row('#' + '_' +rowedited);
      var $tr = $(row.node());
      var $table = $tr.find('td table');
      var $td = $tr.find('td');

      $tr.addClass(type == 'reject' ? 'newTabClass' : 'newClass');
      $table.addClass(type == 'reject' ? 'newTabClass' : 'newClass');
      $td.addClass(type == 'reject' ? 'newTabClass' : 'newClass');

      setTimeout(function(){
          $tr.removeClass(type == 'reject' ? 'newTabClass' : 'newClass');
          $table.removeClass(type == 'reject' ? 'newTabClass' : 'newClass');
          $td.removeClass(type == 'reject' ? 'newTabClass' : 'newClass');
      }, 5000);  
    },
    error: function(err) {
      customSwal('Error',err);
    }
  });
}

kthorngren

Sorry but just seeing the code snippet is not enough to help debug. You are passing in dataValues, type,rowID into the function. What values are these and how do they relate to the edited row?

You are looping through the response data with $.each(_response.data, function(index, item) {. Is there more than one row in the response? Is the response expected to be the edited row?

You are trying to get the row with this:

var row = table.row('#' + '_' + index);

Does the $.each() loop index match with the row or rows you want to update? I suspect not but without seeing a running test case its hard to say.

My suggestion is to place a browser's breakpoint on line 9 and step through the code to see what values exist and if they are the expected values. Or post a link to your page or test case replicating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin