Datatable Editor error on blur

eurosoll

Hi

I have setup a datatable with an inline editor. This is for data collection only and has no ajax calls.

On one specific cell I want to format the data (and then eventually process further).

So I have setup the editor, databable, callback and the function that does the actual processing (code is below).

Everything works ok until I try resetting the cell value. I get the following error:

Any help would be appreciated.

Thanks

Dov

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
    at g (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:49:89)
    at da (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:49:311)
    at s.<anonymous> (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:144:308)
    at s.data (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:130:3)
    at Editor.edit (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:6859:9)
    at Editor._dataSource (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:4873:13)
    at Editor._submitSuccess (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5941:11)
    at http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5766:9
    at Editor._submitTable (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5833:2)
    at Editor._submit (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5762:13)

//Editor Definition

  receiptEditor = new $.fn.dataTable.Editor({
    table: "#receiptTable",
    fields: [
      {
        label: "Tools",
        name: "tools"
      },
      {
        label: "ledger_type",
        name: "ledger_type",
        type: "select",
        options: lineTypeOptions
      },
      {
        label: "Description",
        name: "description"
      },
      {
        label: "AccountName",
        name: "accountName",
        id: "receiptCustomer"
      },
      {
        label: "CustomerReference",
        name: "customerReference"
      },
      {
        label: "Note",
        name: "note"
      },
      {
        label: "LineReference",
        name: "lineReference"
      },
      {
        label: "ReceiptAmount",
        name: "amount"
      },
      {
        label: "NoteButton",
        name: "noteButton"
      },
      {
        label: "Icons",
        name: "icons"
      },
      {
        label: "Remove",
        name: "remove"
      },
      {
        label: "CustomerId",
        name: "customerId"
      },
      {
        label: "LineNumber",
        name: "lineNumber"
      }
    ]
  });


//Setup Inline editing

$('#receiptTable').on( 'click', 'tbody td', function (e) {
    receiptEditor.inline();
  });

//Datable instance

  rctTable = $("#receiptTable").DataTable({
    columnDefs: [
      { className: "tools", targets: [0] },
      { className: "ledgerType", targets: [1] },
      { className: "receiptDescription", targets: [2] },
      { className: "receiptCustomer", targets: [3] },
      { className: "receiptCustomerReference", targets: [4] },
      { className: "receiptNote", targets: [5] },
      { className: "receiptLineReference", targets: [6] },
      { className: "receiptAmount", targets: [7] },
      { className: "receiptAllocated", targets: [8] },
      { className: "receiptOnAccount", targets: [9] },
      { className: "receiptCustomerId", targets: [13] },
      { className: "receiptLineNumber", targets: [14] }
    ],
    dom: "Brt",
    columns: [
      {
        data: "tools",
        render: function(data, type, row) {
          return "<i id='transactionsWindow' class='fas fa-receipt transactionsWindow iconHidden'></i>"; // <i id='receiptBlueCircle' class='fas fa-dot-circle receiptBlueCircle blueIcon'></i>
        }
      },
      {
        data: "ledger_type",
        render: function(data, type, row) {
          return lineTypeOptions[data - 1].label;
        }
      },
      {
        data: "description",
        render: function(data, type, row) {
          return receiptDescription;
        }
      },
      {
        data: "accountName"
      },
      {
        data: "customerReference"
      },
      {
        data: "note"
      },
      {
        data: "lineReference"
      },
      {
        data: "amount",
        classname: "receiptAmount"
      },
      {
        data: "allocated",
        classname: "receiptAllocated",
        render: function(data, type, row) {
          return "0.00";
        }
      },
      {
        data: "onAccount",
        classname: "receiptOnAccount",
        render: function(data, type, row) {
          return "0.00";
        }
      },
      {
        data: "noteButton",
        render: function(data, type, row) {
          return "<i class='fas fa-pencil-alt noteButton' style='text-align:center; width:1%'></i>";
        }
      },
      {
        data: "icons",
        render: function(data, type, row) {
          return "<i class='fas fa-plus plusButton table-add' style='text-align:left; width:1%'></i>";
        }
      },
      {
        data: "remove",
        render: function(data, type, row) {
          return "<i class='fas fa-times table-remove' style='text-align:center; width:1%'></i>";
        }
      },
      {
        data: "customerId"
      },
      {
        data: "lineNumber"
      }
    ],
    ordering: false,
    keys: {
      columns: ':not(:first-child)',
      keys: [ 9 ],
      editor: receiptEditor,
      editOnFocus: true
    },
    select: {
      select: true,
      style: "single",
      selector: "td:first-child",
      blurable: true
    },
    buttons: [
      {
        extend: "remove",
        editor: receiptEditor
      }
    ]
  });


//Callback on blur of receiptAmount cell

  $("#receiptTable").on(
    "focusout",
    ".receiptAmount",
    function() {   
      receiptAmountChanged(this);
    }
  );

//function called by blur Callback

  function receiptAmountChanged(current){

  var rowIndex = rctTable.row( rctTable.cell(current).index() ).index()
  
  var receiptAmount = rctTable.cell(current).data();
  receiptAmount = displayAsMoney(receiptAmount);

  rctTable.cell(current).data(receiptAmount).draw();

  };

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Thanks for the details. It does indeed look like the receiptAmountChanged function would cause this since it is modifying the DataTable and redrawing it before Editor does.

Rather than doing the receipt amount calculation on blur, I would suggest that you do it in a rendering function. Simply pass the data through your displayAsMoney function (which appears to be all it is doing) and return the resulting value from the renderer.

Worth noting that DataTables has a built in number renderer that can be useful for formatting numbers into currency if that is all you need to do.

Allan

eurosoll

Thanks for the quick reply.

I cut the function down for brevity on the post.

However the function also sets other cells on the row.

Would I be able to do these via a rendering function?

allan

Yes, depending on what the function is doing. Is it just modifying the data for output? If so, then absolutely, using a renderer is the way forward.

Allan

patakijv

Can you post the updated code for how you resolved the issue? I am experiencing a similar issue. I am familiar with defining a rendering function for the data when the table loads but it is not quite clear to me how to call a rendering function in the way it is suggested, after the table is loaded and after an edit of a cell without doing so on the blur/change/keyup.