Most probably something I have done wrong .....

rgtps

Sorry for the newbie question, but I have most likely done something stupid. I am using a Bootstrap 3 template.

I am using DataTables and Editor on an in-house development.

I am able to connect the DataTable to the PHP editor class, and I am getting data displayed nicely in my table.

However, when I click on edit, I get an modal devoid of fields and inputs. No error messages appear in the console. The same goes for New. For clarity I get the modal title and button.

When I click on delete I get the delete modal with "Are you sure you wish to delete 0 rows?".

So, I though I would change to inline editing. When I do so, I get the console message:

Uncaught TypeError: Cannot read property 'node' of undefined
at Editor.inline (dataTables.js:78215)
at HTMLTableCellElement.<anonymous> (qav-menu-items.js:37)
at HTMLTableElement.dispatch (jquery-2.1.0.min.js:3)
at HTMLTableElement.r.handle (jquery-2.1.0.min.js:3)
Editor.inline @ dataTables.js:78215
(anonymous) @ qav-menu-items.js:37
dispatch @ jquery-2.1.0.min.js:3
r.handle @ jquery-2.1.0.min.js:3

The field in the table is subsequently cleared.

Please would you be able to point me in the right direction in order to ascertain where I have gone wrong.

Many Thanks

Rob

allan

Hi Rob,

Could you show us the Javascript you are using for DataTables and Editor please?

Allan

rgtps

var editor = new $.fn.dataTable.Editor( {} );
new $.fn.dataTable.Editor( {
ajax:  './php/dataTablesEditor/connections/customers.php',
table: '#customers',
fields: [
    { label: 'Site Code', name: 'sitecode' },
    { label: 'Customer Name',  name: 'customername'  },
    { label: 'Address Line 1',  name: 'addr1'  },
    { label: 'Address Line 2',  name: 'addr2'  },
    { label: 'Address Line 3',  name: 'addr3'  },
    { label: 'Address Line 4',  name: 'addr4'  },
    { label: 'Address Line 5',  name: 'addr5'  },
    { label: 'Postcode',  name: 'postcode'  },
    { label: 'Telephone',  name: 'telephone'  },
    { label: 'AM',  name: 'am'  },
    { label: 'RM',  name: 'rm'  },
    { label: 'Active',  name: 'active'  },
    { label: 'Customer Group',  name: 'customergroupid'  }
]
} );

$('#customers').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this );
} );


$('#customers').DataTable( {
dom: "Bfrtip",
ajax: './php/dataTablesEditor/connections/customers.php',
dom: 'Bfrtip',
columns: [
    { data: 'sitecode' },
    { data: 'customername' },
    { data: null, render: function ( data, type, row ) { return data.addr1+"<br />"+data.addr2+"<br />"+data.addr3+"<br />"+data.addr4+"<br />"+data.addr5+'<br />'+data.postcode; } },
    { data: 'telephone' },
    { data: 'am' },
    { data: 'rm' },
    { data: 'active' },
    { data: 'customergroupid' }
],
select: true,
buttons: [
    { extend: 'create', editor: editor },
    { extend: 'edit',   editor: editor },
    { extend: 'remove', editor: editor },
    {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        }
]

} );

rgtps

Sorry I omitted to mention that the export features all operate as expected, including filtered / selected records.

allan

Hi,

Change:

var editor = new $.fn.dataTable.Editor( {} );
new $.fn.dataTable.Editor( {

to be:

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

You are currently creating two Editor instances, the first one with defaults only, and that's the one that is being stored in a variable.

Allan

rgtps

Doh.

Thank you so much.

Trudges away with his tail between his legs for making such a silly error and not spotting it ;-)

allan

Took me, as a second pair of eyes, a good few minutes to spot it as well. Not an obvious one that (until you know about it)!

Allan