TypeError: undefined is not an object (evaluating 'h.contents')

nessinits

I'm trying to build a standalone editor.

My HTML:

            <dl class="table-display">
                <dt >Achternaam:</dt>
                <dd data-editor-field="wl_persons.lastname"></dd>
                <dt>Tussenvoegsels:</dt>
                <dd data-editor-field="wl_persons.prefix"></dd>
                <dt>Voornamen:</dt>
                <dd data-editor-field="wl_persons.firstname"></dd>
                <dt>Roepnaam:</dt>
                <dd data-editor-field="wl_persons.givenname"></dd>
                <dt>Initialen:</dt>
                <dd data-editor-field="wl_persons.initials"></dd>
            </dl>

My editor:

                // wl_personsEditor
                var wl_personseditor = new $.fn.dataTable.Editor( {
                    ajax: url_root + 'assets/app/' + app_id + '/php/table.wl_persons.php',
                    table: '#wl_persons',
                    fields: [ {
                            label: "Achternaam:",
                            name:  "wl_persons.lastname"
                        },{
                            label: "Voornamen:",
                            name:  "wl_persons.firstname"
                        },{
                            label: "Roepnaam:",
                            name:  "wl_persons.givenname"
                        },{
                            label: "Initialen:",
                            name:  "wl_persons.initials"
                        },{
                            label: "Tussenvoegsels:",
                            name:  "wl_persons.prefix"
                        }
                    ],
                    i18n: json
                } ); // wl_personsEditor
                wl_personstable.button().add( null, { extend: 'remove', editor: wl_personseditor } );
                wl_personstable.button().add( null, { extend: 'edit', editor: wl_personseditor } );
                wl_personstable.button().add( null, { extend: 'create', editor: wl_personseditor } );
                
                $('*[data-editor-field]').on( 'click', function () {
                    console.log(this);
                    wl_personseditor.inline( this );
                } );

When I click a data-editor-field, I get the error: TypeError: undefined is not an object (evaluating 'h.contents')

This console.log results in the expected: <dd data-editor-field="wl_persons.prefix"></dd>

Does anyone have an idea what's missing?

tangerine

A HTML table is missing.

allan

Remove the table: '#wl_persons', option. As @tangerine notes, that is telling Editor that there is a table, but really there isn't since this is a standalone editing instance.

Allan