Display controller and template couldn't work togher

5320835@qq.com

Hi Alan,

I'm working on form customization with eidtor, I copied example code from the page https://editor.datatables.net/plug-ins/display-controller/editor.onPage

function onPageDisplay ( elm ) {
    var name = 'onPage'+Math.random();
    var Editor = $.fn.dataTable.Editor;
    var emptyInfo;
 
    Editor.display[name] = $.extend( true, {}, Editor.models.display, {
        // Create the HTML mark-up needed the display controller
        init: function ( editor ) {
            emptyInfo = elm.html();
            return Editor.display[name];
        },
 
        // Show the form
        open: function ( editor, form, callback ) {
            elm.children().detach();
            elm.append( form );
 
            if ( callback ) {
                callback();
            }
        },
 
        // Hide the form
        close: function ( editor, callback ) {
            elm.children().detach();
            elm.html( emptyInfo );
 
            if ( callback ) {
                callback();
            }
        }
    } );
 
    return name;
}

then I added both display and template into my editor as below

new $.fn.dataTable.Editor( {
 ajax: '/api/staff',
 table: '#staff',
 display: onPageDisplay($('#Product_Header')),
 template: '#Product_Header',
} );

Here is my html code

                                        <form id="Product_Header">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <editor-field name="Product_Code"></editor-field>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <editor-field name="Product_Name"></editor-field>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <editor-field name="Unit_Price"></editor-field>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <editor-field name="Product_Img"></editor-field>
                                                </div>
                                            </div>
                                        </form>

I customized a button at main datatable as below

                    editor.create({
                        title: 'Create new row',
                        buttons: [
                            'Save',
                            {
                                label: 'Cancel',
                                fn: function () {
                                    editor.close();
                                }
                            }
                        ]
                    });

When I click on this button, I got error message as below

jquery.min.js:3 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at HTMLFormElement.<anonymous> (http://desktop-idhm2sh/bvadmin/vendor/jquery/jquery.min.js:3:16874)
    at Ha (http://desktop-idhm2sh/bvadmin/vendor/jquery/jquery.min.js:3:15306)
    at r.fn.init.append (http://desktop-idhm2sh/bvadmin/vendor/jquery/jquery.min.js:3:16764)
    at Object.open (http://desktop-idhm2sh/bvadmin/js/dashboard/product.js:188:22)
    at Editor.open (http://desktop-idhm2sh/bvadmin/vendor/datatables-editor/js/dataTables.editor.js:3275:34)
    at Object.maybeOpen (http://desktop-idhm2sh/bvadmin/vendor/datatables-editor/js/dataTables.editor.js:4516:26)
    at Editor.create (http://desktop-idhm2sh/bvadmin/vendor/datatables-editor/js/dataTables.editor.js:2353:17)
    at _Api.action (http://desktop-idhm2sh/bvadmin/js/dashboard/product.js:152:28)
    at action (http://desktop-idhm2sh/bvadmin/vendor/datatables-button/js/dataTables.buttons.js:515:18)
    at HTMLAnchorElement.<anonymous> (http://desktop-idhm2sh/bvadmin/vendor/datatables-button/js/dataTables.buttons.js:530:6)

What went wrong with my code, please advise,

Thanks,
Wenbin

allan

Hi Wenbin,

The new child element contains the parent.

Is describing the issue. Basically you have got it set to insert into itself (i.e. the template being shown inside the display controller - which is the same element).

Try using two different elements for the two operations.

Allan

5320835@qq.com

Hi Allan,

Thanks, It works, however it looks like the template style (CSS) doesn't apply on fields I set, and the forms I appends on that includes header and footer, can I append only fields to it?

Thanks,
Wenbin

allan

Use div.DTE_Field in your CSS selector. This page documents the structure of the DOM that Editor uses along with the class names.

Allan