Autofill is giving me "Uncaught TypeError: this.node is not a function"

ntstravel

I've been searching these forums but can't seem to find an answer that work for me. I've got the paid version of editor and the code on my table looks like below. I'm trying to get Autofill to work - it shows the blue corner block, I can drag it, but it doesn't update anything and I get the console error Uncaught TypeError: this.node is not a function.

I've seen this error was mentioned in the forums, but nothing seems to help. I've just downloaded the latest package so think everything is up to date.

I hope someone can help.

Thank you!

<table id="prices-table" class="order-column row-border nowrap">
    <thead>
        <tr style="font-size: 14px;">
            <th>Valid From</th>
            <th>Valid To</th>
            <th>Price Name</th>
            <th>Price Per</th>
            @if($product->category->slug == 'accommodation')
                <th>Board</th>
            @endif
            <th>Currency</th>
            <th>Amount</th>
            {{-- <th class="text-right">Order</th> --}}
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>

var editor;

$(document).ready(function() {

    editor = new $.fn.dataTable.Editor( {
        ajax: '{!! route('app.prices') !!}',
        table: '#prices-table',
        idSrc:  'id',
        fields: [ {
                label: 'Valid From:',
                name: 'valid_from',
                type:  'datetime',
                format:  'YYYY-MM-DD',
            }, {
                label: 'Valid To:',
                name: 'valid_to',
                type:  'datetime',
                format:  'YYYY-MM-DD',
            }, {
                label: 'Name:',
                name: 'name'
            }, {
                label: 'Unit:',
                name: 'unit_id',
                type:  'select',
                options: {'one': 1, 'two': 2, 'three': 3}
            }, {
            @if($product->category->slug == 'accommodation')
                label: 'Board Type:',
                name: 'board_type_id'
            }, { @endif
                label: 'Currency:',
                name: 'currency',
            }, {
                label: 'Amount:',
                name: 'amount'
            }
        ],
    });

    // Activate an inline edit on click of a table cell
    $('#prices-table').on( 'click', 'tbody td', function (e) {
        editor.inline( this, {
            submitOnBlur: true
        });
    });

    var table = $('#prices-table').DataTable({
        dom: 'Bfrtip',
        processing: false,
        serverSide: false,
        fixedHeader: {
            header: true,
        },
        paging: false,
        ajax: '{!! route('app.prices.index', ['product_id' => $product->id]) !!}',
        select: true,
        colReorder: true,
        rowId: 'id',
        columns: [
            {
                data: 'valid_from',
                className: 'dt-body-center',
                render: function (data, type, row) {
                    return data.substring(0, 10);
                },
            },
            {
                data: 'valid_to',
                className: 'dt-body-center',
                render: function (data, type, row) {
                    return data.substring(0, 10);
                },
            },
            {
                data: 'name',
            },
            {
                data: 'unit_id',
                className: 'dt-body-center',
            },
            @if($product->category->slug == 'accommodation')
            {
                data: 'board_type_id',
                className: 'dt-body-center',
            },
            @endif
            {
                data: 'currency',
                className: 'dt-body-center',
            },
            {
                data: 'amount',
                className: 'dt-body-right',
                render: $.fn.dataTable.render.number(',', '.', 0),
            },
        ],
        // editor...
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor },
        ],
        // keys: {
        //     editor: editor,
        // },
        autoFill: {
            horizontal: false,
            vertical: true,
            columns: '', // = all
            editor: editor,
        },
    });

}); // document.ready

</script>
<style type="text/css">
    #prices-table {
        font-size: 14px;
    }
</style>

colin

The code looks ok, have you seen these two threads, here and here, they may help. If you have and no success, please could you link to your page so we can take a look.

Colin

ntstravel

omg, it turned out that I wasn't loading all the js library files!
Sorry guys, it's now working 100%.
Thanks, Colin, for pointing me in the right direction.