Datatable editor don't send data to server after click on send button

MichaelGross

Description of problem:

I mix vuejs and jquery datatables and editor.

My problem is when I click on notes column, the editor is shown, enter something in the textbox and click on Save button, the result is nothing data is sent to server.

Could you help me to point what the error in my code?

Thank you very much!

<template>
    <div class="dynamic-tables">
        <h2 class="page-title">EBay Ranking</h2>

        <Widget title="<h4>Items</h4>" customHeader>
            <table id="auktionen" class="table table-bordered table-responsive" style="width:100%">
                <thead>
                    <tr>
                        <th>{{ $t('Seller Name') }}</th>
                        <th>{{ $t('EBay Site') }}</th>
                        <th></th>
                        <th>{{ $t('Keywords') }}</th>
                        <th>{{ $t('Notes') }}</th>
                        <th>{{ $t('Position Yesterday/Today ADS') }}</th>
                        <th>{{ $t('Position Yesterday/Today') }}</th>
                        <th>{{ $t('Last 7 Days') }}</th>
                        <th></th>
                        <th></th>
                        <th>{{ $t('Item Category') }}</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </Widget>
    </div>
</template>

<script>
import $ from 'jquery';
import 'datatables.net-bs4';
import 'datatables.net-buttons-bs4';
import 'datatables.net-responsive-bs4';
import 'datatables.net-rowgroup-bs4';
import 'datatables.net-select-bs4';
import '../../assets/js/dataTables.editor.min';

import Widget from '@/components/Widget/Widget';
import TokenService from '../../services/token.service';
import config from '../../config';

export default {
    name: 'EbayRankingPage',
    components: { Widget },
    data() {
        return {
            editor: null
        };
    },
    methods: {},
    mounted() {
        let headers = {
            'cache-control': 'no-cache',
        };
        let accessToken = TokenService.getToken();

        if (accessToken && accessToken !== '') {
            headers.Authorization = accessToken;
        }

        this.editor = new $.fn.dataTable.Editor({
            ajax: config.api.url + '/ebayranking/datatables/update-notes',
            table: '#auktionen',
            idSrc: 'itemNumber',
            fields: [
                {
                    label: 'Notes:',
                    name: 'notes',
                }
            ],
        });
        
        const editor = this.editor;
        $('#auktionen').on('click', 'tbody td.notes:not(:first-child)', function() {
            editor.inline(this, {
                buttons: {
                    label: 'Save',
                    className: 'btn-sm btn-primary',
                    fn: function() {
                        try {
                            this.submit();
                        } catch (e) {
                            console.log(e);
                        }
                    }
                }
            });
        });

        const table = $('#auktionen').DataTable({
            processing: true,
            serverSide: true,
            filter: false,
            orderMulti: false,
            stateSave: true,
            ajax: {
                url: config.api.url + '/ebayranking/datatables',
                headers: headers,
                type: 'POST',
                dataType: 'json',
            },
            fixedHeader: {
                header: true,
            },
            columns: [
                { data: 'sellerName', name: 'sellerName', autoWidth: true }, //index0
                {
                    data: 'globalId',
                    name: 'globalId',
                    autoWidth: true,
                    render: function(data, type, full) {
                        return '<img src="/images/flags/16/' + full.flag + '"/>&nbsp;' + full.siteName;
                    },
                }, //index1
                { data: 'grouping', name: 'grouping', autoWidth: true }, //index2
                { data: 'keywords', name: 'keywords', autoWidth: true }, //index3
                { data: 'notes', name: 'notes', autoWidth: true, className: 'notes' }, //index4
                { data: 'positionAdv', name: 'positionAdv', autoWidth: true }, //index5
                { data: 'position', name: 'position', autoWidth: true }, //index6
                {
                    data: 'id',
                    name: '2weeks',
                    autoWidth: true,
                    render: function(data) {
                        return `<button class="btn btn-sm btn-outline-success btn-rounded seo-measures" data-id="${data}" data-mode="7days">
                                    <i class="fa fa-line-chart"></i>
                                </button>`;
                    },
                }, //index7
                { data: 'visitors', name: 'visitors', autoWidth: true }, //index8
                { data: 'observer', name: 'observer', autoWidth: true }, //index9
                { data: 'itemCategory', name: 'itemCategory', autoWidth: true }, //index10
                {
                    data: 'id',
                    name: 'itemCheck',
                    autoWidth: true,
                    render: function(data, type, full) {
                        return `<button class="btn btn-sm btn-outline-info btn-rounded item-check" data-itemnumber="${full.itemNumber}" data-keyword="${full.keywords}"/>
                                    <i class="fa fa-question"></i> Check
                                </button>`;
                    },
                }, //index11
                {
                    data: 'id',
                    name: 'delete',
                    autoWidth: true,
                    render: function(data) {
                        return `<a class="btn btn-sm btn-outline-warning btn-rounded ebay-ranking-hide" data-id="${data}">Delete</a>`;
                    },
                }, //index12
                { data: 'itemNumber', name: 'itemNumber', autoWidth: true }, //index13
            ],
            responsive: true,
            searching: true,
            select: true,
            bLengthChange: false,
            lengthMenu: null,
            order: [[13, 'asc']],
            displayLength: 25,
            drawCallback: function() {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(2, { page: 'current' })
                    .data()
                    .each(function(group, i) {
                        if (last !== group) {
                            $(rows)
                                .eq(i)
                                .before(group);
                            last = group;
                        }
                    });
            },
        });
    },
};
</script>

<style src="./EBayRanking.scss" lang="scss" />

allan

Can you give me a link to your page please? From ajax: config.api.url + '/ebayranking/datatables/update-notes', the data from the form should be getting posted there.

Allan