Editing a field removes the row
Editing a field removes the row
First off, love the tool and will be buying an Editor license once my boss approves it :D
I've been using DataTables for a while now but just started playing with the Editor. I want to build my own custom controller so that I can more easily do the validation, however I'm running into the problem where whenever I edit a field, the row disappears after submitting the change. My debug bookmark: http://debug.datatables.net/udupur
Javascript on page:
function activateTable2(){
if(aTable2 == 0){
aTable2 = 1;
editor = new $.fn.DataTable.Editor( {
ajax: 'localhost/data/editVisitMissing',
table: '#visitMissing',
fields: [ {
label: 'Site Number:',
name: 'siteNumber'
},{
label: 'Patient Code:',
name: 'patientCode'
}, {
label: 'Visit:',
name: 'visitName'
}, {
label: 'Visit Date:',
name: 'visitDate'
}, {
label: 'Patient Status:',
name: 'patientStatus'
}, {
label: 'Paid:',
name: 'paid'
}
]
} );
$('#visitMissing').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
submit: 'allIfChanged'
} );
} );
$('#visitMissing').DataTable({
'paging': true,
'dom': '<"col-sm-6"l><"col-sm-6"f><"col-sm-12"p>rtp',
'order': [[1,'asc']],
'lengthChange': true,
'iDisplayLength': 50,
'lengthMenu': [[25,50,100,-1], [25,50,100,'All']],
'searching': true,
'ordering': true,
'info': false,
'responsive': true,
'scrollX': false,
'autoWidth': true,
'ajax': {
'url': 'localhost/data/generateVisitMissing',
'data': {
'studyID': 1,
'dataRepoSessionID': 12
}
},
'columns': [
{ data: 'siteNumber' },
{ data: 'patientCode' },
{ data: 'visitName' },
{ data: 'visitDate' },
{ data: 'patientStatus' },
{ data: 'paid' }
]
});
}
}
Basic table setup:
<table id='visitMissing' class='table table-striped table-bordered hover dataTable' cellspacing='0' role='grid' width='100%'>
<thead><tr><th>Site Number</th><th>Patient Code</th><th>Visit</th><th>Visit Date</th><th>Patient Status</th><th>Paid</th></tr></thead>
<tbody><tbody>
</table>
And for testing purposes, I'm just doing a simple return in the php file:
print json_encode(array("data"=>array("DT_RowId"=>"row_11", "siteNumber"=>"1", "patientCode"=>"001-002", "visitName"=>"test", "visitDate"=>date('Y-m-d'), "patientStatus"=>"gogo", "paid"=>"paid1")));
exit();
I can see the form data posted correctly:
action:edit
data[row_11][siteNumber]:1
data[row_11][patientCode]:001-0021
data[row_11][visitName]:-
data[row_11][visitDate]:2013-05-21
data[row_11][patientStatus]:Screen Fail
data[row_11][paid]:<span class='text-red'>No</span>
And I can see the data coming back:
{
"data": {
"DT_RowId": "row_11",
"siteNumber": "1",
"patientCode": "001-002",
"visitName": "test",
"visitDate": "2016-02-05",
"patientStatus": "gogo",
"paid": "paid1"
}
}
The table generates initially without any issue. But when editing a row, instead of showing the new row, it gets removes instead.
This question has an accepted answers - jump to answer
Answers
The return from the server isn't quiet right - the
data
object should actually be an array of objects:It needs to be an array since Editor can edit multiple rows at a time.
Allan
Arrgghhh, of course it was something like that. That's what I get for using quick, made up on the spot data. Thanks Allan!