select2 editor plugin is breaking editor.add used in events like initCreate and initEdit

karmendra

select2 editor plugin is breaking editor.add used in events like initCreate and initEdit.

I do not get error if I move prod_name in fields array in intialization, or if I do not use select2. Note that recently I had updated the https://editor.datatables.net/plug-ins/field-type/editor.select2#Plug-in-code, before that it was working.

The error that I get in console is Uncaught Unknown field name - prod_name.

        var editor = new $.fn.dataTable.Editor({
            ajax: "/mydata.php",
            table: "#dataTableBuilder",
            display: "bootstrap",
            fields: [
                {label: "Product Attribute:", name: "prod_attribute"},
                {label: "Attribute Content:", type: "textarea", name: "prod_attribute_content"},
            ]
        });

        editor.on('initCreate', function () {
            editor.add(
            {
               label: "Product Name:", 
               name: "prod_name", 
               className: 'required' , 
               type:'select2',
               opts:{
                            placeholder: 'Select a product',
                            minimumInputLength: 1,
                            ajax: {
                                url: '/searchbusinessproduct',
                                dataType: 'json',
                                data: function (params) {
                                    return {
                                        product_search: params.term,
                                        search_type: 'product_search',
                                        prod_id:$('#product_id').val()
                                    };
                                },
                                processResults: function (data) {
                                    return {
                                        results: data
                                    };
                                },
                                cache: true
                            },
                            escapeMarkup: function (markup) {
                                return markup;
                            },
                            templateSelection: formatState,
                    }
                }
            );
        });

karmendra

I found the error to be in editor.select2.js:87 file that I had recently update.

    set: function (conf, val) {
        var field = this.field(conf.name); 
        /*  here in the above line "this" is the editor instance from
        the initialization of editor, that doesn't have the field that 
        is added later in the event initCreate editor.add().
        That error is returned by the editor.field('field_name') 
        function, as it doesn't find the field in the instance. */

        if (conf.separator && !Array.isArray(val)) {

Not sure how to fix it, as a hot fix I put a try catch around it to ignore the exception thrown and use field variable only if it is defined.

Let me know if there is a better solution, when we use events to add editor fields with select2.

Thanks.

karmendra

Any comments, anyone?

karmendra

Hi @Alan, Any thoughts on this?

allan

Hi,

Really sorry that I missed this one! Thank you for the description - I think I can see the issue. In the add() API method, the sequence goes:

1. Create the field
2. Perform any modifications needed on the field
3. Add the field to the internal array

2 and 3 need to be swapped around. I've just committed a fix to that effect and it will be in the next release.

If you want to try it immediately, find the comment:

// If in an editing mode, we need to set the field up for the data

In the Editor code. Then move that block to just before the _displayReorder if condition. The latter part of the method should thus look like this:

    this._dataSource('initField', cfg);

    let editorField = new Editor.Field(cfg, this.classes.field, this);

    this.s.fields[ name ] = editorField;

    if (after === undefined) {
        this.s.order.push(name);
    }
    else if (after === null) {
        this.s.order.unshift(name);
    }
    else {
        let idx = $.inArray(after, this.s.order);
        this.s.order.splice(idx+1, 0, name);
    }

    // If in an editing mode, we need to set the field up for the data
    if (this.s.mode) {
        let editFields = this.s.editFields;
        editorField.multiReset();

        $.each(editFields, function(idSrc, editIn) {
            let value;
            if (editIn.data) {
                value = editorField.valFromData(editIn.data);
            }

            editorField.multiSet(idSrc, value !== undefined ?
                value :
                editorField.def()
            );
        });
    }

    if (reorder !== false) {
        this._displayReorder(this.order());
    }

    return this;

Allan