DataTables Editor Trial errors

sonicblaze

I'm trying to get my Editor trial working, but when I click on any of my editable cells, I see this error thrown in my console. It's a private project so unfortunantly I don't have a public URL to share, but happy to provide any details I can.

Uncaught TypeError: dtE2P[F88] is undefined
K1h][l7P datatables.min.source.js:256
K1h][u3u datatables.min.source.js:256
g datatables.min.source.js:600
_editor datatables.min.source.js:601
_constructor datatables.min.source.js:594

sonicblaze

Here's a screenshot of that line for reference:

allan

Could you show me your Javascript code you are using to set up the Editor and DataTable instances please?

Allan

sonicblaze

Yup, here it is!

HTML Table

<table id="category_datatable" class="table" width="100%">
        <thead>
        <tr>
          <th>Condition</th>
          <th>Rq.By</th>
          <th>Rq.Date</th>
          <th>Rcvd.Date</th>
          <th>Notes</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
</table>

Javascript

var editor = new $.fn.dataTable.Editor( {
        ajax: "../loans/writeloan",
        table: "#category_datatable",
        idSrc: 'id',
        fields: [ {
            label: "Condition:",
            name: "condition"
        }, {
            label: "Requested By:",
            name: "requested_by"
        }, {
            label: "Requested On:",
            name: "requested_on"
        }, {
            label: "Received On:",
            name: "received_on"
        }, {
            label: "Note:",
            name: "note"
        }, {
            label: "ID:",
            name: "id"
        }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    } );

    var category_datatable = $("#category_datatable").DataTable({
        "processing": true,
        "serverSide": true,
        "paginate": false,
        "searching": false,
        "bInfo": false,
        "rowId": "id",

        "ajax": {
            "url": '<%= get_loan_category_conditions_path(:loan_id => @loan.id, :category => @condition_category, format: :datatable)%>',
            "rowId": 'id'
        },
        "createdRow": function( row, data, dataIndex){
            colorConditionRow(row,data['requested_on'],data['received_on'])
        },
        keys: {
            columns: ':not(:first-child)',
            keys: [ 9 ],
            editor: category_editor,
            editOnFocus: true
        },
        "columns": [
            {data: 'condition'},
            {data: 'requested_by'},
            {data: 'requested_on'},
            {data: 'received_on'},
            {data: "note"},
            {data: "id",
                "render": function(data, type, row, meta){
                    return "<a href=\"javascript:destroy_condition('" + data + "')\"><i class='fa fa-minus-circle' aria-hidden='true'></i></a>"
                }
            },
        ]
      }
  )

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

allan

Thanks for that!

You have:

var editor = new $.fn.dataTable.Editor( {

but then use:

editor: category_editor,

That var editor = should be var category_editor =.

Regards,
Allan