not able to render page dynamically after init

[goncalomiranda]

hi there,

i'm trying to render my table dynamically but i'm always failing with same error, here's my jquery script:

dataTableCRM.destroy();

$.ajax({
  url: `/fetch-boxes?pipeline=${pipelineKey}`,
  method: "GET",
  dataType: "json",
  success: function (data) {
    dataTableCRM.init();
    if (data.boxes && data.boxes.length > 0) {

      let newRows = [
        [
          "luis lvf",
          "5001",
          "2024-05-05 12:27:34",
          "2024-05-05 12:27:34",
          "75",
        ],
      ];

      // Add new rows to the table
      dataTableCRM.insert({ data: newRows });

Error is:

TypeError: Cannot read properties of undefined (reading 'type')
at z (simple-datatables.js:3:41543)

The init works well:

dataTableCRM = new simpleDatatables.DataTable(crmBoxes);

let newData = {
  headings: [
    "Name",
    "Stage Key",
    "Creation Date",
    "Last Stage Change",
    "Days in Stage",
  ],
  data: [],
};

// add the rows
dataTableCRM.insert(newData);

But when i try to re render it fails.

Can anyone help me? let me know if more info is required.

[goncalomiranda]

$(document).ready(function () {
const crmBoxes = $("#crmDatabaseTable")[0];

let dataTableCRM;
console.log("on ready");
if (crmBoxes) {
dataTableCRM = new simpleDatatables.DataTable(crmBoxes);

let newData = {
  headings: [
    "Name",
    "Stage Key",
    "Creation Date",
    "Last Stage Change",
    "Days in Stage",
  ],
  data: [],
};

// add the rows
dataTableCRM.insert(newData);

console.log("instantiated the table");
// Add event listener for row selection
// crmBoxes.addEventListener("click", function (event) {
//   const rowElement = event.target.closest("tr");
//   if (rowElement && rowElement.parentNode.tagName === "TBODY") {
//     const rowIndex = rowElement._DT_RowIndex; // Internal row index used by simple-datatables

//     const rowData = dataTableCRM.rows().data[rowIndex];
//     console.log(rowData);

//     if (rowData) {
//       const boxKey = rowData.boxKey; // Assuming boxKey is part of the data

//       // Redirect to box-detail page with boxKey
//       window.location.href = `/box-detail?boxKey=${boxKey}`;
//     }
//   }
// });

}

$("#pipeline").on("change", function () {
const pipelineKey = $(this).val();
$("#fetch-boxes-button").prop("disabled", !pipelineKey);
});

$("#fetch-boxes-form").on("submit", function (event) {
event.preventDefault();

const pipelineKey = $("#pipeline").val();

dataTableCRM.destroy();

$.ajax({
  url: `/fetch-boxes?pipeline=${pipelineKey}`,
  method: "GET",
  dataType: "json",
  success: function (data) {
    // Clear existing table data

    dataTableCRM.init();

    console.log("here");

    if (data.boxes && data.boxes.length > 0) {

      let newRows = [
        [
          "luis lvf",
          "5001",
          "2024-05-05 12:27:34",
          "2024-05-05 12:27:34",
          "75",
        ],
      ];

      // Add new rows to the table
      dataTableCRM.insert({ data: newRows });

      console.log("done");
    } else {
      dataTableCRM.insert([
        {
          name: "No boxes found",
          stageKey: "",
          creationTimestamp: "",
          lastStageChangeTimestamp: "",
          daysSinceLastChange: "",
        },
      ]);
    }

    dataTableCRM.update((measureWidths = false));
  },
  error: function (error) {
    console.error("Error fetching boxes:", error);
    dataTableCRM.insert([
      {
        name: "Error fetching boxes",
        stageKey: "",
        creationTimestamp: "",
        lastStageChangeTimestamp: "",
        daysSinceLastChange: "",
      },
    ]);
  },
});

});
});