Issue with datatables for updating a row

Issue with datatables for updating a row

maniyamaniya Posts: 78Questions: 13Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    myy tr shows like this

    https://prnt.sc/xg8AWzaHDPzT

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

  • maniyamaniya Posts: 78Questions: 13Answers: 0

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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    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

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited March 8

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

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

    Kevin

  • maniyamaniya Posts: 78Questions: 13Answers: 0

    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);
        }
      });
    }
    
  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

Sign In or Register to comment.