Uncaught TypeError: Cannot set property '_aData' of undefined with checkbox

Application Engineering

I'm encountering the error "Uncaught TypeError: Cannot set property '_aData' of undefined " when toggling a checkbox I have in an inline editor on a Datatable. Which the browser debugger reports to be the following on line 12 in the following snippit from jquery.dataTables. Any help is appreciated.

    _api_register( 'row().data()', function ( data ) {
        var ctx = this.context;
    
        if ( data === undefined ) {
            // Get
            return ctx.length && this.length ?
                ctx[0].aoData[ this[0] ]._aData :
                undefined;
        }
    
        // Set
        ctx[0].aoData[ this[0] ]._aData = data;
    
        // Automatically invalidate
        _fnInvalidate( ctx[0], this[0], 'data' );
    
        return this;
    } );

Using the Editor on a Datatable, I have inline editing with input text as well as select options along with the checkbox in each row.

I have an on click event for the cells that are input text and select option menu, that I also seem to need to disable the focus/blur submit on the checkbox, and an on change event for a cell with the checkbox.

   $(document).ready(function() {
      //[...]
      editor = new $.fn.dataTable.Editor( {
        table: "#assets_table",
        ajax: {
          edit: {
            type: 'PUT',
            url: window.location.pathname + '/audio_assets/_id_/update_single'
          }
        },
        formOptions: {
          inline: {
            drawType: "none"
          }
        },
        idSrc: 'id',
        //[...]
        fields: [
          {
            label: "Name",
            name: "name"
          },
          {
            label: "Asset Status",
            name: "asset_status",
            type: "select",
            ipOpts: [
              { "label": "", "value": "" },
              { "label": "Open", "value": "Open" },
              { "label": "Complete", "value": "Complete" }
            ]
          },
          {
            label: "Temporary",
            name: "is_temporary",
            type: "checkbox",
            separator: "|",
            options: [ {label: '', value: 1} ]
          }
        ],
      });
      $("#assets_table").on('click', 'tbody td:not(:first-child):not(:nth-child(11))', function(e) {
        editor.inline(oTable.cell(this).index(), {
           onBlur: 'submit'
        });
      });
      // [...]

      // :nth-child(11)
      $("#assets_table").on('change', 'input.editor-is_temporary', function () {
        editor
          .edit( $(this).closest('tr'), false)
          .set( 'is_temporary', $(this).prop( 'checked') ? 1 : 0 )
          .submit();
      });
      editor.on('submitComplete', function (e, json, data, action){
        if(json != null && json.error) {
          alert('A problem occurred: ' + json.error);
        }
        if(json != null && json.data ) {
          var oTable = $('#assets_table').DataTable();
          $.each(json.data, function(row_id, row_data) {
            var row = oTable.row('#' + row_data.DT_RowId);
            row.data(row_data);
            // row is refreshed using above but still need to do the following for the checkbox
            $('input.editor-is_temporary', $(row.selector.rows)).prop('checked', row_data.is_temporary == 1);
          });
        }
      });
    });

I don't refresh the datatable after submit, as I have drawType set to none, however I'm able to make the ajax call to update and refresh a single row being edited just fine when a submit happens after editing any input text, select option menu, checkbox.

One thing to note is that the datatable does refresh only when making the change to the checkbox. I actually don't want to have the datatable to refresh when changing the checkbox value.

Also to note, when enabling the on click event to focus/blur on the cell for the checkbox, no error is encountered when making a change to the checkbox value after submit. But one has to click on the cell of the checkbox to focus the checkbox, make changes, and then blur to submit, but this is not the desired way and also allows for confusion as to when to click to make a change to the checkbox value and how to submit the change.

I hope the above has the information needed, but if not I can provide additional details.

allan

row.data(row_data);

What does row_data contain at that point? You shouldn't actually need to use the DataTables API at all there. The server, from your ajax option, should be responding with the data for the row that was edited (see the documentation here). Is it?

Allan

Application Engineering

Yes It does respond with all the data for the row.

Having you said that I didn't need to make the DataTables API call, I removed it and no longer get the error. I followed this as an example

So the main problem with the error is resolved. I do have a secondary problem of the full refresh even though I have drawType set to none. Full refresh only happens when making changes to the value of the check box. Making changes to the input text or select options doesn't do a full refresh which is the intended behavior.

Is it ok to continue discussion on the secondary problem here or should I create a new discussion?

allan

The issue is that you have set the drawType for the inline edit - but not for the main edit (which is being triggered by the use of edit(). Add a drawType for the formOptions.main object and you should get the same behaviour.

Allan

Application Engineering

It's always the simplest things. But that did the trick, thank you very much!