Row refreshing after every submit

Row refreshing after every submit

rocketreadingrocketreading Posts: 8Questions: 6Answers: 0

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 );
            }
        } );

    });

Answers

This discussion has been closed.