Autofill is not working with Editor

Autofill is not working with Editor

kartikeyas00kartikeyas00 Posts: 16Questions: 4Answers: 0

Debug Code
awupid

Description of problem:

I am trying to submit the data to the database with autoFill extensions. Whenever I try to autofill, the editor doesn't get triggered at all. Like nothing happens at all. Maybe I am using the wrong configuration or there is a callback method, I need to use.

My javascript code:

<script>
    var editor;
    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            ajax: {
                edit: {
                    type: 'PUT',
                    data: function (data) {
                        data = JSON.stringify(data.data)
                        return data
                    },
                    url: '{{url_for("veada_pattern_labels.already_created_labels_data_edit")}}'
                },
                remove: {
                    type: 'DELETE',
                    data: function (data) {
                        id = Object.keys(data.data);
                        return { 'id': JSON.stringify(id) }
                    },
                    url: '{{url_for("veada_pattern_labels.already_created_labels_data_remove")}}',
                    error: function (jqXHR, error, errorThrown) {
                        accessError(jqXHR.status);
                    },
                }
            },
            table: "#myTable",
            idSrc: 'id',
            fields: [
                {
                    label: "Year:",
                    name: "year"
                },
                {
                    label: "PID:",
                    name: "pid"
                },
                {
                    label: "PieceDescription:",
                    name: "piece_description"
                },
                {
                    label: "PieceQty:",
                    name: "piece_qty"
                },
                {
                    label: "File Name:",
                    name: "file_name"
                },
                {
                    label: "Company:",
                    name: "company"
                },
                {
                    label: "Series:",
                    name: "series"
                },
                {
                    label: "Seat Description:",
                    name: "seat_description"
                },
                {
                    label: "Seat LongDescription:",
                    name: "seat_longdescription"
                },
                {
                    label: "Side:",
                    name: "side"
                },
                {
                    label: "Piece Number:",
                    name: "piece_number"
                },
                {
                    label: "Total Pieces:",
                    name: "total_pieces"
                },

                {
                    label: "Extension1:",
                    name: "extension_1"
                },
                {
                    label: "ColorID1:",
                    name: "colorid_1"
                },
                {
                    label: "Extension2:",
                    name: "extension_2"
                },
                {
                    label: "ColorID2:",
                    name: "colorid_2"
                },
                {
                    label: "Extension3:",
                    name: "extension_3"
                },
                {
                    label: "ColorID3:",
                    name: "colorid_3"
                },
                {
                    label: "Extension4:",
                    name: "extension_4"
                },
                {
                    label: "ColorID4:",
                    name: "colorid_4"
                },
                {
                    label: "Extension5:",
                    name: "extension_5"
                },
                {
                    label: "ColorID5:",
                    name: "colorid_5"
                },
                {
                    label: "Piece Or Pair:",
                    name: "piece_or_pair",
                    type: "select",
                    options: ['Pc', 'Pair']
                },
                {
                    label: "Initials:",
                    name: "initials"
                },
                {
                    label: "User:",
                    name: "user"
                }
            ]
        });


        table = $('#myTable').DataTable({
            processing: true,
            serverSide: true,
            deferRender: true,
            pageLength: -1,
            ajax: "{{ url_for('veada_pattern_labels.already_created_labels_data')}}",
            dom: "Blfrtip",
            autoFill: {
                //alwaysAsk: false,
                horizontal: false,
                editor: editor
            },
            keys: {
                columns: ':not(:first-child)',
                editor: editor,
                blurable: true,
            },
            stateSave: true,
            select: {
                style: 'os',
                selector: 'td:first-child',
            },
            //columns
            columns: [
                { data: "id", "visible": false, },
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false,
                    width: "12px"
                },
                { data: "year" },
                { data: "pid" },
                { data: "piece_description" },
                { data: "piece_qty" },
                { data: "file_name" },
                { data: "company" },
                { data: "series" },
                { data: "seat_description" },
                { data: "seat_longdescription" },
                { data: "side" },
                { data: "piece_number" },
                { data: "total_pieces" },
                { data: "extension_1" },
                { data: "colorid_1" },
                { data: "extension_2" },
                { data: "colorid_2" },
                { data: "extension_3" },
                { data: "colorid_3" },
                { data: "extension_4" },
                { data: "colorid_4" },
                { data: "extension_5" },
                { data: "colorid_5" },
                { data: "piece_or_pair" },
                { data: "initials" },
                { data: "user" },
                { data: "session_id" },
                { data: "timestamp" }
            ],
            buttons: [
                "colvis",
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor },
            ],
        })

        yadcf.init(table, [
            {
                column_number: 2,
                data: [{ label: '2015', value: '2015' }, { label: '2016', value: '2016' },
                { label: '2017', value: '2017' }, { label: '2018', value: '2018' },
                { label: '2019', value: '2019' }, { label: '2020', value: '2020' },
                { label: '2021', value: '2021' }, { label: '2022', value: '2022' },],
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '50px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 3,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '50px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 7,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 8,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 9,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 25,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 26,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 27,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 28,
                filter_type: "range_date",
                date_format: "mm/dd/yyyy",
                filter_delay: 500,
                datepicker_type: 'jquery-ui'

            },
        ])
    });
</script>
{% endblock %}

This question has an accepted answers - jump to answer

Answers

  • kartikeyas00kartikeyas00 Posts: 16Questions: 4Answers: 0

    Also just to point out that it works fine when the data is not being submitted to the server. For example, where an editor has no ajax specified, just editing in the frontend, that's all. Looks very weird to me....

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    It works OK here - could you take a look and see if that helps, please.

    Also, I see you're using YADCF, it would be worth trying with just vanilla DataTables to see if that's interfering in anyway. If it isn't, could you check the console for errors, please.

    Colin

  • kartikeyas00kartikeyas00 Posts: 16Questions: 4Answers: 0

    It is not working when taking YADCF out. Also, I have looked at the example and didn't help at all. There are no errors in the console. Maybe the way I am importing the libraries are the problem: Here they are-

    <head>
    <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/bootstrap-4.4.1-dist/bootstrap.min.css') }}" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/jquery-ui-1.12.1/jquery-ui.min.css') }}" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/DataTables-1.10.21/dataTables.bootstrap4.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/Buttons-1.6.3/buttons.bootstrap4.min.css') }}" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/Select-1.3.1/select.bootstrap4.min.css') }}" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/ColReorder-1.5.2/colReorder.bootstrap4.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/FixedHeader-3.1.7/fixedHeader.bootstrap4.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/Responsive-2.2.5/responsive.bootstrap4.min.css') }}"
            crossorigin="anonymous">
    
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/Editor-1.9.4/editor.bootstrap4.min.css') }}" crossorigin="anonymous">
    
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/KeyTable-2.5.2/keyTable.dataTables.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/KeyTable-2.5.2/keyTable.bootstrap4.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/AutoFill-2.3.5/autoFill.dataTables.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/AutoFill-2.3.5/autoFill.bootstrap4.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/select2-4.0.13/select2.min.css') }}"
            crossorigin="anonymous">
        <link rel="stylesheet" type="text/css"
            href="{{ url_for('static', filename='css/yadcf-0.9.3/jquery.dataTables.yadcf.css') }}" crossorigin="anonymous">
    </head>
    
    <script src="{{ url_for('static', filename='js/jquery-3.5.1/jquery-3.5.1.min.js') }}" crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/jquery-ui-1.12.1/jquery-ui.min.js') }}" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
        crossorigin="anonymous"></script>
    
    <script src="{{ url_for('static', filename='js/bootstrap-4.4.1-dist/bootstrap.min.js') }}"
        crossorigin="anonymous"></script>
    
    <script src="{{url_for('static', filename='js/DataTables-1.10.21/jquery.dataTables.min.js')}}"
        crossorigin="anonymous"></script>
    <script src="{{url_for('static', filename='js/DataTables-1.10.21/dataTables.bootstrap4.min.js')}}"
        crossorigin="anonymous"></script>
    
    <script src="{{url_for('static', filename='js/Select-1.3.1/dataTables.select.min.js')}}"
        crossorigin="anonymous"></script>
    <Script src="{{url_for('static', filename='js/FixedHeader-3.1.7/dataTables.fixedHeader.min.js')}}"
        crossorigin="anonymous"></Script>
    <script src="{{url_for('static', filename='js/Responsive-2.2.5/dataTables.responsive.min.js')}}"
        crossorigin="anonymous"></script>
    <Script src="{{url_for('static', filename='js/ColReorder-1.5.2/dataTables.colReorder.min.js')}}"
        crossorigin="anonymous"></Script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/Editor-1.9.4/dataTables.editor.min.js') }}"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/Editor-1.9.4/editor.bootstrap4.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/Buttons-1.6.3/dataTables.buttons.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/Buttons-1.6.3/buttons.bootstrap4.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/Buttons-1.6.3/buttons.colVis.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/Buttons-1.6.3/buttons.html5.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/KeyTable-2.5.2/dataTables.keyTable.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/KeyTable-2.5.2/keyTable.bootstrap4.min.js') }}"
        crossorigin="anonymous"></script>
    
    <script src="{{ url_for('static', filename='js/AutoFill-2.3.5/dataTables.autoFill.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/AutoFill-2.3.5/autoFill.bootstrap4.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/select2-4.0.13/select2.full.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/yadcf-0.9.3/jquery.dataTables.yadcf.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/signature_pad@3.0.0-beta.3/signature_pad.umd.js') }}"
        crossorigin="anonymous"></script>
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Without a test case, it's difficult to say I'm afraid. My guess is that you might have another variable called editor somewhere on your page, since you are using a global value there, but if not that, we would need a test case.

    Thanks,
    Allan

  • kartikeyas00kartikeyas00 Posts: 16Questions: 4Answers: 0
    edited September 2020

    @allan Ok after a little debugging. I found out that the private method _editor has a bug which was returning undefined values for the id field of a certain row. I have documented my changes in the code below. This code is the part of dataTables.autoFill.js and it worked for me. Please review it and let me know if this is the correct way.

    Please see my comments on 58-59. Thanks

    /**
         * Use the Editor API to perform an update based on the new data for the
         * cells
         *
         * @param {array} cells Information about the selected cells from the key
         *     up function
         * @private
         */
        _editor: function ( cells )
        {
            var dt = this.s.dt;
            var editor = this.c.editor;
        
            if ( ! editor ) {
                return;
            }
    
            // Build the object structure for Editor's multi-row editing
            var idValues = {};
            var nodes = [];
            var fields = editor.fields();
    
    
            for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
                for ( var j=0, jen=cells[i].length ; j<jen ; j++ ) {
                    var cell = cells[i][j];
    
                    // Determine the field name for the cell being edited
                    var col = dt.settings()[0].aoColumns[ cell.index.column ];
                    var fieldName = col.editField;
    
                    if ( fieldName === undefined ) {
                        var dataSrc = col.mData;
    
                        // dataSrc is the `field.data` property, but we need to set
                        // using the field name, so we need to translate from the
                        // data to the name
                        for ( var k=0, ken=fields.length ; k<ken ; k++ ) {
                            var field = editor.field( fields[k] );
    
                            if ( field.dataSrc() === dataSrc ) {
                                fieldName = field.name();
                                break;
                            }
                        }
                    }
    
                    if ( ! fieldName ) {
                        throw 'Could not automatically determine field data. '+
                            'Please see https://datatables.net/tn/11';
                    }
    
                    if ( ! idValues[ fieldName ] ) {
                        idValues[ fieldName ] = {};
                    }
    
                    //var id = dt.row( cell.index.row ).id(); // Original code commented out for the time being by kartikeyas00
                    // Patch made by kartikeyas00. In the above code, dt.row(cell.index.row).id() is giving undefined value
                    // so using dt.row(cell.index.row).data(cell.index.row).id instead to get the value of the id
                    var id = dt.row(cell.index.row).data().id
                    idValues[ fieldName ][ id ] = cell.set;
    
                    // Keep a list of cells so we can activate the bubble editing
                    // with them
                    nodes.push( cell.index );
                }
            }
    
            // Perform the edit using bubble editing as it allows us to specify
            // the cells to be edited, rather than using full rows
            editor
                .bubble( nodes, false )
                .multiSet( idValues )
                .submit();
        },
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    Thanks for the patch. That suggests to me that the rowId parameter might need to be set to id - have you tried that? rowId: 'id'?

    Thanks,
    Allan

  • kartikeyas00kartikeyas00 Posts: 16Questions: 4Answers: 0

    Yes that worked. Also maybe it is a good idea to have both ways to get the ids? If one gives you undefined or someone didn't set the rowId param

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Yes, possibly. I should probably have gone with a default of id for the row id, rather than DT_RowId... I'll keep this in mind for when we go major changes in future (due to concerns about backwards compatibility).

    Allan

This discussion has been closed.