DataTables Editor v1.6.5 error Cannot read properties of undefined (reading 'select')

bbrindza

Hi Alan and Kevin,

Last year around this time we worked on a application that allowed our sales team to do their yearly budget.
They application was well received and it is that time of year again, however when I dusted off the application and was testing out functionality I received an error when using the DataTable Editor function. ( this worked last year)

Cannot read properties of undefined (reading 'select')
js salespersonBillTo_editor.on('open', function () { $('div.DTE input')[0].select(); });

I receive the error when I click on any cell in the Next Years Budget row .

As luck would have it I found a forum thread from last year with a bin where we work on this particular area of the script.

https://datatables.net/forums/discussion/76556/expanding-all-child-rows-from-button#latest

I created a new bin https://live.datatables.net/falecabi/1/edit with the latest code that was working last year, however I'm getting some errors the bin and it does not show the to show budgetDataSet row records.

My scripts does work in production( see image below) and this is not the issue I am currently having, just need some help with the bin.

Once we can get the budget data to show in the bin, then perhaps we can recreate the "Cannot read properties of undefined (reading 'select')" error

kthorngren

I'm seeing this error when opening the Test Customer child row:

DataTables warning: table id=salespersonBillTo_productRows_12555 - Requested unknown parameter 'location' for row 0, column 4. For more information about this error, please see https://datatables.net/tn/4

The columns.data for the Datatable defined in the createChild_2() function doesn't match the data structure assigned to the variable productsDataSet. Make adjustments to either or both of these so the structures match.

I receive the error when I click on any cell in the Next Years Budget row .

The code snippet:

salespersonBillTo_editor.on('open', function () { $('div.DTE input')[0].select(); });

should only execute when opening the editor form. Your description seems to indicate that the error occurs when inline editing. Here is a simple example with your code snippet to show what its supposed to do:
https://live.datatables.net/guwafemu/517/edit

Select a row and click edit. The $('div.DTE input')[0].select() code will select the text in the first input field.

Possibly the error is from a different statement in your code?

Kevin

bbrindza

Kevin,

It is the right line of code that Chrome is showing, Like I said this was working last year without any issues. Here is the snipit of code for this table ...

 salespersonBillTo_editor = new $.fn.dataTable.Editor( {

       ajax: {
             type: 'POST',
             url: 'BudgetReporting/ssp/ssp_BudgetData.php',
             data: { locationCode: rowData.locationCode,  
                      salespersonGroupingNumber: rowData.returnedSalespersonGroupNumber,
                      customerNumber: rowData.customerNumber,
                      productNumber: rowData.productNumber
            },
          },

        table: '#salespersonBillTo_budgetRows_' + rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber,
      
        formOptions: { inline: { onBlur: 'submit' } },
        fields: [
                        {
                        //  label: 'January Budget:',
                        name:  'BD$01', type:  "display"},
                        {name:  'BD$02' , type:  "display"},
                        {name:  'BD$03', type:  "display"},
                        {name:  'BD$04', type:  "display"},
                        {name:  'BD$05', type:  "display"},
                        {name:  'BD$06', type:  "display"},
                        {name:  'BD$07', type:  "display"},
                        {name:  'BD$08', type:  "display"},
                        {name:  'BD$09', type:  "display"},
                        {name:  'BD$10', type:  "display"},
                        {name:  'BD$11', type:  "display"},
                        {name:  'BD$12', type:  "display"},
                      ]
         } );
  
        // Set inline cell as selected to immediately start typing in new value          
         salespersonBillTo_editor.on('open', function () { 
               $('div.DTE input')[0].select();
        });

            
//  // Child row DataTable configuration, always passes the parent row's id to server
    row.child()
        .find('table.budgetDetailTable')
        .DataTable({
            createdRow: function ( row, data, index ) {
                  $('td', row).eq(1).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_janBudget');
                  $('td', row).eq(2).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_febBudget');
                  $('td', row).eq(3).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_marBudget');
                  $('td', row).eq(4).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_aprBudget');
                  $('td', row).eq(5).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_mayBudget');
                  $('td', row).eq(6).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_juneBudget');
                  $('td', row).eq(7).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_julyBudget');
                  $('td', row).eq(8).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_augBudget');
                  $('td', row).eq(9).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_septBudget');
                  $('td', row).eq(10).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_octBudget');
                  $('td', row).eq(11).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_novBudget');
                  $('td', row).eq(12).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_decBudget');
               },
                
               dom: 't',
               ajax: {
                        type: 'POST',
                    url: 'BudgetReporting/ssp/ssp_BudgetData.php',
                    data: { locationCode:rowData.locationCode,  
                            salespersonGroupingNumber: rowData.returnedSalespersonGroupNumber,
                            customerNumber: rowData.customerNumber,
                            productNumber: rowData.productNumber
                         },
                    },
                 autoWidth: false,
                 serverSide: true,
                 order: [ 1, 'asc' ],
             keys: {
                    columns: ':not(:first-child, .markCompleteButton)',
                    keys: [ 9 ],
                    editor: n,
                    editOnFocus: true
             },
               columns: [
                           {
                               data: null,
                               searchable: false,
                               orderable: false,
                               className: 'budgetRowTitle',
                               render: function ( data, type, row ) {
                                    return '<td><b>Next Year Budget</b></td>';
                                 }
                            },  

                             { data: 'BD$01' },
                             { data: 'BD$02' },
                             { data: 'BD$03' },
                             { data: 'BD$04' },
                             { data: 'BD$05' },
                             { data: 'BD$06' },
                             { data: 'BD$07' },
                             { data: 'BD$08' },
                             { data: 'BD$09' },
                             { data: 'BD$10' },
                             { data: 'BD$11' },
                             { data: 'BD$12' },
                   
                           {
                               data: null,
                               className: 'totalBudgetTD',
                               render: function(data, type, full, row ) {

                                 var sum = 0;
                                 for (var i=1 ; i<13 ; i++) {
                                   sum += parseFloat(full['BD$' + (i<10 ? '0' : '') + i]);
                                   sum = Math.round(sum * 10) / 10
                                 }
                               
                                   return '<span id="'+rowData.locationCode+'-'+rowData.customerNumber+'-'+rowData.productNumber+'_salespersonBillTo_totalBudgetSpan">'+sum+'</span>';
                               }
                           },

                             // ** Mark Completed Button
                           {
                               data: null,
                               searchable: false,
                               orderable: false,
                               className: 'markCompleteButton',
                               render: function ( data, type, full, meta ) {
                                   
                                    if( full.SYNCFL == 'N'){ 

                                          return '<button type="button" id="BR_CBT_markBudgetRecordCompletedButon_'+ full.PKLOC + full.PKGRP + full.PKCUST + full.PKPROD +'"class="btn btn-primary btn-xs" onclick="BR_CBT_showMarkBudgetRecordCompletedModal(\''+ full.PKLOC +'\', \''+ full.PKGRP +'\', \''+ full.PKCUST +'\', \''+ full.PKPROD +'\' )">Mark Complete</button>';
                                    }else{
                                           return '<button type="button" id="BR_CBT_markBudgetRecordCompletedButon_'+ full.PKLOC + full.PKGRP + full.PKCUST + full.PKPROD +'"class="unstyled-button" )">Mark Complete</button>';
                                    }
                                }
                            },  
               ],                                                                                                              
         
               columnDefs: [ 
                  { targets: [ 1 ], width: '89.24px', },
                  { targets: [ 2 ], width: '90.44px', },
                  { targets: [ 3 ], width: '86.84px', },
                  { targets: [ 4 ], width: '85.04px', },
                  { targets: [ 5 ], width: '84.13px', },
                  { targets: [ 6 ], width: '85.19px', },     
                  { targets: [ 7 ], width: '84.28px', },
                  { targets: [ 8 ], width: '88.19px', },
                  { targets: [ 9 ], width: '92.85px', },
                  { targets: [ 10 ], width: '89.24px', },
                  { targets: [ 11 ], width: '92.1px', },
                  { targets: [ 12 ], width: '91.95px', },
                 { targets: "_all", orderable: false}
                            ],
               
               select: {
                   style:    'os',
                   selector: 'td:first-child'
               },
        });

kthorngren

Does the problem happen when clicking on a table cell or when clicking the Edit button to open the form?

Try using the opened event, instead of open, so the form is sure to be open when $('div.DTE input')[0].select(); executes.

Kevin

bbrindza

Hi Kevin,

Sorry to wasted your time but I found the problem.
I had my Editor field set to type display. Thanks for helping .

         fields: [
                        {
                        //  label: 'January Budget:',
                        name:  'BD$01', type:  "display"},
                        {name:  'BD$02' , type:  "display"},
                        {name:  'BD$03', type:  "display"},
                        {name:  'BD$04', type:  "display"},
                        {name:  'BD$05', type:  "display"},
                        {name:  'BD$06', type:  "display"},
                        {name:  'BD$07', type:  "display"},
                        {name:  'BD$08', type:  "display"},
                        {name:  'BD$09', type:  "display"},
                        {name:  'BD$10', type:  "display"},
                        {name:  'BD$11', type:  "display"},
                        {name:  'BD$12', type:  "display"},
                      ]

kthorngren

Right, so there wouldn't be any input elements to find. Glad you found the problem.

Kevin