Editor - select defaults to first option on edit

Editor - select defaults to first option on edit

mawmaw Posts: 2Questions: 1Answers: 0

I cannot figure out why that when I click to edit a select field the selected option always defaults to the first option. This only applies to the 'created by' field, and not the active field. I'm using php Laravel's blade template engine but this is the end result. Is there something I'm missing? Thank you,

var editor, table;

        $(document).ready(function() {
            // Editor
            editor = new $.fn.dataTable.Editor( {
                ajax: "/suppliers/data",
                table: "#table",
                fields: [
                    { label: "Name:", name: "name" },
                    { label: "Active:", name: "active", type: 'select',
                        options: ['Yes','No']
                    },
                    { label: "Added by:", name: "created_by", type: 'select',
                        options: [
                              { label: 'First Name', value: '1' },
                              { label: 'Second Name', value: '2' },
                              { label: 'Third Name', value: '3' },
                              { label: 'Fourth Name', value: '4' },
                        ]
                    }
                ],
                i18n: {
                    create: {
                        title:  "Add a new Supplier",
                    },
                    edit: {
                        title:  "Edit Supplier",
                    }
                }
            } );

            editor.on( 'preSubmit', function ( e, o, action ) {
                if ( action !== 'remove' ) {
                    var name = this.field('name');

                    if (!name.isMultiValue()){
                        if (!name.val()) {
                            name.error('A name must be provided');
                        }
                    }
                    if ( this.inError() ) {
                        return false;
                    }
                }
            } );

            // Inline edit functionality
                $('#table').on( 'click', 'tbody td:not(:first-child)', function (e) {
                    editor.inline( this, {
                        onBlur: 'submit'
                    });
                } );

            //Datatable
            table = $('#table').DataTable( {
                    dom: "Bfrtip",
                ajax: "/suppliers/data",
                order: [[ 1, 'asc' ]],
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false,
                        width: '1%'
                    },
                    { data: "name" },
                    { data: "active" },
                    { data: "created_by" }
                ],
                    select: {
                        style:    'single',
                        selector: 'td:first-child'
                    },
                    columnDefs: [
                        {visible: false, targets: 0},
                    ],
                buttons: [
                    { extend: "create", editor: editor, text: "Add" },
                    { extend: "edit",   editor: editor},
                    { extend: "remove", editor: editor}
                ]
            } );

            // add input for each column for Projects Table
            $('#table tfoot td.searchable').each(function(){
                $(this).html('<input class="filter-input" type="text"/>')
            });

            // add search function for Projects Table
            table.columns().every(function(){
                let that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if(that.search !== this.value){
                        that.search(this.value).draw();
                    }
                })
            });

            editor.on( 'open', function ( e, mode, action ) {
                $('#DTE_Field_created_by').select2({
                    selectOnClose: true,
                    dropdownAutoWidth : true
                });
            } );

        } );

Answers

  • mawmaw Posts: 2Questions: 1Answers: 0

    Solution was difficult to find, but obvious when I found it. My values from my ajax response (name strings) did not match the select option values (ids).

This discussion has been closed.