ES6/webpack environment import editor plugin

connexo

In our current project we're creating native web components. Amongst those is a datatable webcomponent, an extremely stripped-down version of which looks like this:

import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-select';

import editor from './editor-datatables/js/dataTables.editor'

class DataTable extends HTMLElement {
  /* lots of setup code */
  connectedCallback() {
    console.log($.fn.dataTable.Editor); //  returns undefined
  }
}

window.customElements.define('data-table', DataTable);

When we try to to initialize the editor as described in the documentation var editor = new $.fn.dataTable.Editor();, we're getting

Uncaught TypeError: jquery_default.a.fn.dataTable.Editor is not a constructor

connexo

Here's a StackBlitz showcasing the problem:

https://stackblitz.com/edit/js-kedml1

allan

Thanks for the StackBlitz link. Cool platform that - hadn't seen it before.

Three things going on here, which the following should fix:

import editor from '../editor-datatables/dataTables.editor';

window.jQuery = $;
dt = dt(window,$);
editor(window,$);

1. The import path was wrong - it is relative to the datatables.js file.
2. Looks like you need to define window.jQuery manually. Editor looks for a global jQuery variable - I'll see what I can do about that.
3. Need to execute editor like with the dt variable. The return isn't particularly important since it attaches the Editor constructor into jQuery.

Allan

connexo

Thanks for the quick reply. I corrected the path error but still cannot get it to work - looks like Stackblitz doesn't even allow creating global variables.

Feel free to fork the StackBlitz and try to create a working version.

connexo

Now I have a version that doesn't report any console errors any more, yet clicking a td won't make the field editable. Can you please be so kind and quickly take a look?

https://stackblitz.com/edit/js-kedml1

connexo

@allan Not sure if a mention is necessary so you notice the new comments.

kthorngren

Allan is good about following up. He is busy and in the UK

I've not seen stackblitz either. Pretty cool, thanks for the pointer. There is a console log error when clicking on a row:
Uncaught (in promise) Error: Cannot parse given Error object

I figured this meant that stackblitz wouldn't provided alert messages so I surmised that you were getting this error.

Unable to find row identifier

https://datatables.net/manual/tech-notes/14

I added idSrc for Editor and rowId for Datatables. Plus I changed you Datatables columns.data to match the 'name' of the field in the Editor.

Try your updated example:
https://stackblitz.com/edit/js-5bi3hk?file=index.js

Kevin

connexo

Actually I wasn't getting any console errors any more (Chrome 70, Win). Thanks for fixing the StackBlitz example. Will give it a ride in the real world now.

connexo

Now, when I change a cell, and press enter, I'm getting

TypeError: extender is not a function
    at Object.eval (dataTables.editor.js:2506)
    at Function.each (jquery.js:360)
    at Editor.(js-2tw4bs.stackblitz.io/anonymous function).(anonymous function) [as _submitTable] (https://js-2tw4bs.stackblitz.io/~/editor-datatables/dataTables.editor.js:2504:11)
    at Editor.(js-2tw4bs.stackblitz.io/anonymous function).(anonymous function) [as _submit] (https://js-2tw4bs.stackblitz.io/~/editor-datatables/dataTables.editor.js:2493:93)
    at eval (dataTables.editor.js:1484)
    at Editor.(js-2tw4bs.stackblitz.io/anonymous function).(anonymous function) [as _event] (https://js-2tw4bs.stackblitz.io/~/editor-datatables/dataTables.editor.js:2038:13)
    at send (dataTables.editor.js:1479)
    at Editor.(js-2tw4bs.stackblitz.io/anonymous function).(anonymous function) [as submit] (https://js-2tw4bs.stackblitz.io/~/editor-datatables/dataTables.editor.js:1486:115)
    at HTMLDocument.eval (dataTables.editor.js:2160)
    at HTMLDocument.dispatch (jquery.js:5183)
console.(anonymous function) @ preview-c35b6c3f1aa2eeeddb9ba.js:1
(anonymous) @ preview-c35b6c3f1aa2eeeddb9ba.js:1
Promise.then (async)
t.default @ preview-c35b6c3f1aa2eeeddb9ba.js:1
window.onerror @ preview-c35b6c3f1aa2eeeddb9ba.js:1
error (async)
t.setWindowErrorHandler @ preview-c35b6c3f1aa2eeeddb9ba.js:1
(anonymous) @ preview-c35b6c3f1aa2eeeddb9ba.js:1
Promise.then (async)
(anonymous) @ preview-c35b6c3f1aa2eeeddb9ba.js:1
Promise.then (async)
PREVIEW_INSTANTIATE_BUNDLE @ preview-c35b6c3f1aa2eeeddb9ba.js:1
(anonymous) @ preview-c35b6c3f1aa2eeeddb9ba.js:1
dispatch @ preview-c35b6c3f1aa2eeeddb9ba.js:1
(anonymous) @ preview-c35b6c3f1aa2eeeddb9ba.js:1
window.onmessage @ preview-c35b6c3f1aa2eeeddb9ba.js:1

allan

You need to update your DataTables install. There was a fix a while back in Editor that needed updates to both DataTables and Editor. If you update to the latest version of DataTables, that issue should be resolved.

Allan

connexo

The version being used in that StackBlitz is 2.1.1. Is there a newer version available? Also, the editor version is from like 5 days ago.

connexo

The other problem with the otherwise working StackBlitz is if I edit a cell, and then click on another, the changes I did in the first cell are being reverted.

https://stackblitz.com/edit/js-2tw4bs

connexo

Please ignore my last question/comment. I wasn't aware that for the changes to take effect you have to press enter. Is this configurable?

colin

Hi @connexo ,

Yep, all configurable - see formOptions.inline. The one you want is onBlur, see form-options,

Cheers,

Colin