Row refreshing after every submit
Row refreshing after every submit

in Editor
Hi there,
I'm having trouble stopping the row from being fully refreshed after every update. Is it possible to change this behaviour? Below is my js code.
$('.expenses').each(function() {
var id = $(this).data('id');
editors[id] = new $.fn.dataTable.Editor( {
ajax: "/ajax/expenses/editor",
table: ".expenses[data-id='"+id+"']",
fields: [
{
"label": "Test",
"name": "test_id",
"type": "select",
"options": [
{
label: 'PTP',
value: 0
},
@foreach(Auth::user()->recentTests() as $test)
{
label: '{{ $test->job->company->name . "-" . $test->name . "-" . $test->job_id}}',
value: {{ $test->id }}
},
@endforeach
]
},
{
"label": "Category",
"name": "category",
"type": "select",
"options": [
"Customer entertainment",
"Hotels and subsistence",
"Travel",
"Other"
]
},
{
"label": "Postcode from",
"name": "postcode_from"
},
{
"label": "Postcode to",
"name": "postcode_to"
},
{
"label": "Mileage",
"name": "mileage_amount"
},
{
"label": "Return",
"name": "return",
"type": "checkbox",
"separator": "|",
"options": [
{ label: "", value: 1 }
]
},
{
"label": "Details",
"name": "details",
"type": "textarea"
},
{
"label": "VAT",
"name": "vat_receipt",
"type": "checkbox",
"separator": "|",
"options": [
{ label: "", value: 1 }
]
},
{
"label": "VAT amount",
"name": "vat_amount"
},
{
"label": "Gross amount",
"name": "gross_amount"
},
{
"label": "Date",
"name": "receipt_date",
"type": "date",
"dateFormat": "dd-mm-yy"
}
],
formOptions: {
inline: {
onBlur: true
}
}
} );
editors[id].on('onSubmitSuccess', function(e, json, data) {
//console.log( tables[id].cell( this ) );
//console.log( tables[id].row( this ) );
for (var table in tables) {
tables[table].ajax.reload();
}
});
$(this).on( 'click', 'tbody td', function () {
if ($(this).hasClass('add-images')) return;
editors[id].inline( this, {
submitOnBlur: true
} );
} );
tables[id] = $(this).DataTable( {
dom: 'Bfrtip',
ajax: '/ajax/expense-groups/'+id,
aaSorting: [],
autoWidth: false,
columns: [
{
"data": "test_name",
"editField": "test_id",
"width": "10%"
},
{
"data": "category",
"width": "10%"
},
{
"data": "postcode_from",
"width": "10%"
},
{
"data": "postcode_to",
"width": "10%"
},
{
"data": "mileage_amount",
"width": "5%"
},
{
"data": "return",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center",
"width": "2%"
},
{
"data": "details",
"width": "10%"
},
{
"data": "vat_receipt",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center",
"width": "2%"
},
{
"data": "vat_amount",
"width": "5%"
},
{
"data": "gross_amount",
"width": "5%"
},
{
"data": "receipt_date",
"width": "10%"
},
{
data: null,
className: 'add-images',
orderable: false,
"render": function(data, type, full, meta) {
return '<a title="Add receipts" class="btn btn-sm btn-success show-images" data-id="'+full.id+'" href="javascript:void(0);"><i class="glyphicon glyphicon-picture"></i></a> ' +
// '<a title="Edit images" class="btn btn-sm btn-info edit-images" data-id="'+full.id+'" href="javascript:void(0);"><i class="fa fa-edit"></i></a> ' +
'<a title="Delete expense" class="btn btn-sm btn-danger delete-expense" data-group-id="'+id+'" data-id="'+full.id+'" href="javascript:void(0);"><i class="fa fa-remove"></i></a>';
}
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop( 'checked', data.vat_receipt == true );
}
} );
});
This discussion has been closed.
Answers
I've posted a reply in this thread.
Allan