Uncaught TypeError: Cannot read property 'contents' of undefined

adrian125

Hi there... Brand new to Datatables Editor! Looks to be useful, should I ever get it working.

Right now I am loading my data via JSON/Ajax and that works fine. I would like to be able to have my users inline edit one field on the table for quick data entry. Right now, I don't have my sprocs setup, but I would like to at least be able to click on the cell and have it be editable, and I'll worry about what to do with the changes later.

I get the error can not read the property 'contents', so I'm thinking there is a problem with my click handler and what I am passing into the inline function.

Here is my JS right now

// get only the columns we're interested in from the dataset 
    // and translate column names if desired.
    var data = _.map(dataSet, function (item) {
        return {
            schoolSite: item.SchoolSite,
            studentId: item.ID,
            firstName: item.FirstName,
            lastName: item.LastName,
            daysEnrolled: item.StudentDaysOfEnrollment
        }
    });

    //select columns and decide on visibility
    var columns = [
        { data: "studentId" },
        { data: "schoolSite" },
        { data: "firstName" },
        { data: "lastName" },
        { data: "daysEnrolled" }
        //{ defaultContent: "<span class='glyphicon glyphicon-remove delete-item'></span>" }
    ];

    // define column display properties
    var columnDefs = [
    { className: "leftCols", "targets": [0, 1, 2, 3,4] },
    {
        "targets": [1],
        "width": "20%"
    },
    {
        "targets": 0,
        "width": "10%"
    },
    {
        "targets": [2, 3],
        "width": "15%"
    }
        /*
            {
                render: function(data, type, row) {
                    if (data) {
                        return "yes";
                    } else return "no";
                },
                targets: [5]
            }
            */
    ];

 var editor = new $.fn.dataTable.Editor({
        ajax: 'php/table.detailTable.php', //included but no script exists
        table: '#detailTable',
        fields: [
            {
                "label": "Days Enrolled",
                "name": "StudentDaysOfEnrollment"
            }
        ]
    });


    $('#detailTable tbody').on('click', 'td', function () {
        debugger
        editor.inline(table.cell(this));
    });

$('#detailTable').DataTable().clear();
    // instantiate the dataTables object.
    var table = $("#detailTable").DataTable({
        destroy: true,
        //lengthMenu: [12, 30, 50, 100, 1000, 5000],
        lengthMenu: [5, 15, 20, 50, 100, 250],
        data: data,
        pageLength: tableRows,
        searchHighlight: true,
        columns: columns,
        columnDefs: columnDefs,
        order: [[0, "asc"]]
        , rowCallback: function (row, data, index) {
            
        }
    });

    // append the search column header inputs
    table.columns().every(function () {
        var that = this;
        $("input", this.header()).on("keyup change", function () {
            that.search(this.value)
                .draw();
        });
    });

Sorry If i included more than needed!

allan

Hi,

Could also try changing:

editor.inline(table.cell(this));

To be:

editor.inline(this);

Thanks,
Allan