Editor error: Cannot read properties of undefined (reading 'attach')

Jack7

Hi,

I'm giving Editor a go, but running into the error in the subject when trying to inline edit or a similar error with bubble but "ofFeatture" instead of "attach".

I think it has to do with the fact that I initialize DataTable, then add add later. As I'm using this for a reporting and continually clearing and drawing the table as filters are changed.

Error comes up as soon as I click on cell.

Here is my code;

       var reportingTable = "";
       var reportingTableEditor = "";
       $(document).ready(function () {
           reportingTableEditor = new DataTable.Editor({
               table: '#ReportDateRange',
               fields: [
                   {
                       label: 'FullName:',
                       name: 'fullName'
                   },
                   {
                       label: 'Email:',
                       name: 'email'
                   },
                   {
                       label: 'Number:',
                       name: 'number'
                   },
                   {
                       label: 'LastVisit:',
                       name: 'lastVisit'
                   },
                   {
                       label: 'VisitCount:',
                       name: 'visitCount'
                   },
                   {
                       label: 'FormCount:',
                       name: 'formCount'
                   },
                   {
                       label: 'CallCount:',
                       name: 'callCount'
                   },
                   {
                       label: 'ChatCount:',
                       name: 'chatCount'
                   },
                   {
                       label: 'Action:',
                       name: 'action'
                   }
               ],
           });

           reportingTable = $("#RerportingTable").DataTable({
               "scrollX": true,
               responsive: false,
               "dom": "Bfrtip",
               "processing": true,
               "filter": true,
               "orderMulti": false,
               "deferRender": true,
               "scrollY": 500,
               "scrollCollapse": true,
               "scroller": true,
               "paging": false,
               "order": [[0, "asc"]],
               buttons: [
                   {
                       extend: 'csv',
                       //Name the CSV
                       filename: 'CRM Contact Export',
                       exportOptions: {
                           columns: [0, 1, 2, 3, 4, 5, 6, 7]
                       }
                   }

               ],
               "columns":
                   [
                       { "data": "fullName", "name": "FullName", "autoWidth": true },
                       { "data": "email", "name": "Email", "autoWidth": true },
                       { "data": "number", "name": "Number", "autoWidth": true },
                       { "data": "lastVisit", "name": "LastVisit", "autoWidth": true },
                       { "data": "visitCount", "name": "VisitCount", "autoWidth": true },
                       { "data": "formCount", "name": "FormCount", "autoWidth": true },
                       { "data": "callCount", "name": "CallCount", "autoWidth": true },
                       { "data": "chatCount", "name": "ChatCount", "autoWidth": true }
                   ],
               "columnDefs":
                   [
                       {
                           "targets": 8,
                           data: null,
                           width: "20%",
                           title: 'Action',
                           wrap: true,
                           "createdCell": function (td, cellData, rowData, row, col) {
                               $(td).html(`<a class="btn btn-danger mb-2 me-2 OpenPartialModal action-icon" data-target="#EditOrAddCustomerInstanceCampaignModal" data-url="/CRM/AddOrEditCustomerInstancePartial?id=${cellData.id}"> <i class="mdi mdi-square-edit-outline"></i></a> <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>`);
                           }
                       }
                   ]
           });
           reportingTable.on('click', 'tbody td:not(:first-child)', function (e) {
               reportingTableEditor.inline(reportingTable.cell(this).index(), {
                   onBlur: 'submit'
               });
           });
       })

 function populateReportTable() {
     let selectedSite = $('#SiteSelector').val();
     if (selectedSite !== "") {
         $.LoadingOverlay("show", {
             image: "",
             fontawesome: "fa fa-cog fa-spin"
         });
         reportingTable.clear();

         $.get(`/CRM/ReturnListOfContactsBySiteID?siteID=${selectedSite}`)
             .done(function (data) {
                 $.LoadingOverlay("hide");
                 $(data).each(function () {
                     var rowNode = reportingTable.row.add({
                         "fullName": this.fullName,
                         "email": this.email,
                         "number": this.number,
                         "lastVisit": this.lastVisit,
                         "visitCount": this.visitCount,
                         "formCount": this.formCount,
                         "callCount": this.callCount,
                         "chatCount": this.chatCount,
                         "id": this.id
                     });
                     var node = rowNode.node();
                 });
                 reportingTable.draw();                       
             });
     }
 }

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

colin

Try changing:

          reportingTable.on('click', 'tbody td:not(:first-child)', function (e) {
              reportingTableEditor.inline(reportingTable.cell(this).index(), {
                  onBlur: 'submit'
              });
          });

to be:

          $("#RerportingTable").on('click', 'tbody td:not(:first-child)', function (e) {
              reportingTableEditor.inline(reportingTable.cell(this), {
                  onBlur: 'submit'
              });
          });

There are two changes there. The first is to use the jQuery selector for the click event, rather than the DataTables instance. The second is removing the call to index() from the inline() call.

Hopefully that'll do the trick!

Colin

allan

In the Editor initialisation you have:

 table: '#ReportDateRange',

but in the DataTables initialisation you use:

$("#RerportingTable").DataTable({

That discrepancy is likely the cause. Assuming you are using the same table, the two IDs should be the same.

Allan

Jack7

I am not proud of this one.

As a matter of interest, I been playing with ChatGPT for support cases, just to see what it comes up with and it found a lot of things and even things around that variable when I declared it twice. But, it completely missed this.

allan

It's easy done. You aren't the first and won't be the last .

Glad you got it working,
Allan