Ajax Reload With Editor Null Data Error

Restful Web Services

I am using the following datatables implementation. It works correctly until I implement ajax reload, after which I am no longer able to edit any records. I see the error:

dataTables.editor.min.js:64 Uncaught TypeError: Cannot read property 'id' of null

Is the problem related to my two empty columns which contain my edit & remove buttons?

$(document).ready(function() {
    var editor = new $.fn.DataTable.Editor( {
        "ajax": {
            "url": "/js/datatables/php/table.cms_module_uptime_monitors.php",
            "type": "POST",           
            "data": function ( d ) {
                d.user_id = "43";
            }
        },  
        "table": "#cms_module_uptime_monitors",
        "fields": [
            {
                "label": "Monitor ID",
                "name": "monitor_id",
                "type": "text"
            },
            {
                "label": "User ID",
                "name": "user_id",
                "type": "text",
                "def": 43
            },
            {
                "label": "Monitor Type",
                "name": "monitor_type",
                "fieldInfo": "Staff member's first name",
                "type": "select",
                "ipOpts": [
                    {
                        "label": "Web page",
                        "value": "Web page"
                    },
                    {
                        "label": "Email server",
                        "value": "Email server"
                    },
                    {
                        "label": "Server",
                        "value": "Server"
                    }
                ]
            },
            {
                "label": "Monitor Name",
                "name": "monitor_name",
                "type": "text"
            },
            {
                "label": "String",
                "name": "string",
                "type": "textarea"
            },            
            {
                "label": "Remark",
                "name": "remark",
                "type": "textarea"
            },
            {
                "label": "Active",
                "name": "active",
                "type": "select",
                "ipOpts": [
                    {
                        "label": "Active",
                        "value": "Active"
                    },
                    {
                        "label": "Inactive",
                        "value": "Inactive"
                    }
                ]
            },
            {
                "label": "Create Time",
                "name": "create_time",
                "type": "text"
            },
            {
                "label": "Modified Time",
                "name": "modified_time",
                "type": "text",
                "def": "2015-02-09 13:45:03"
            },
            {
                "label": "Status",
                "name": "status",
                "type": "text"
            }
        ]
    });
    
        // Edit record
    $('#cms_module_uptime_monitors').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();
 
        editor
            .title( 'Edit record' )
            .buttons( 'Update' )
            .edit( $(this).closest('tr') );
    } );
 
    // Delete a record
    $('#cms_module_uptime_monitors').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();
 
        editor
            .message( 'Are you sure you wish to remove this record?' )
            .buttons( 'Delete' )
            .remove( $(this).closest('tr') );
    } );

    var table = $('#cms_module_uptime_monitors').DataTable( {
        "dom": '',
        "bSortClasses": false,
        "processing": true,
        "serverSide": true,        
        "ajax": {
            "url": "/js/datatables/php/table.cms_module_uptime_monitors.php",
            "type": "POST",
            "data": function ( d ) {
                d.user_id = "43";
            }
        },
        "lengthMenu": [ [1000, 5000, 10000, 40000], [1000, 5000, 10000, 40000] ],              
        "language": {
           "search": "_INPUT_",
           "searchPlaceholder": "Search monitors....",
           "sLengthMenu": "_MENU_ per page"
        },
        "order": [[ 1, "asc" ]],
        "columns": [       
            {
                "data": "monitor_type"
            },
            {
                "data": "monitor_name"
            },
            {
                "data": "string"
            },
            {
                "data": "active"
            },
            {
                "data": "modified_time"
            },
            {
                "data": "status"
            },
            {
                "data": null,
                "orderable": false, 
                "bSearchable": false,
                "className": "center",
                "defaultContent": '<a href="" class="editor_edit fontawesome-cog fontawesome-lg grey"></a>'
            },
            {
                "data": null,
                "orderable": false, 
                "bSearchable": false,
                "className": "center",
                "defaultContent": '<a href="" class="editor_remove fontawesome-remove fontawesome-lg grey"></a>'
            }
        ],   
        "columnDefs": [ {
            "targets": [ 0, 2 ],
            "createdCell": function (td) {
                $(td).addClass('grey')
            }
        }],             
    });
setInterval( function () {
table.ajax.reload( null, false );
}, 3000 );
}); 

Thanks

Restful Web Services

Seems all I had to do was change the value 'false' to 'true' in the reload function.

setInterval( function () {
table.ajax.reload( null, true);
}, 3000 );

allan

You need to watch out here if you are reloading every 3 seconds. It is going to take longer than that to complete an edit so there is a very good chance that the data int he DataTable will have changed while your user has been editing the data. That shouldn't cause an issue for Editor as such, since it will use whatever data it has available when the edit is started, but something to watch out for and be aware of.

Allan

Restful Web Services

Hi Allan,

Yes, thanks for the prompt. I will be using 10 minute refresh in the production code, this was just a short interval for testing purposes.

Chris