Struggling with Editor Installation

constaac

Preface: I'm a novice web-developer!

I am working on a project for a course that uses a frontend template as a basis. The template comes with webpack and includes Jquery and Bootstrap from the get go.

I was able to get Datatables working via the npm installation guide, so I decided to take the leap and purchase a license for the editor. Since there is no npm install for the editor, I've been running into problems left and right. I have tried several combinations of options via the download page (https://datatables.net/download/index).

Prior to installing the editor, I was able to simply require datatable.net in my main javascript file and datatablize a simple table. Running javascript files via script tags is a little foreign to me, and I'm not sure how to go about the "require" step (if it's even necessary).

Further, using the given script tag throws a "jquery is undefined" error, which I assume has something to do with the script tag executing before webpack makes jquery available.

I am completely lost! Any help or direction to some reading would be much appreciated!

I can't wait to get this working!

allan

Running javascript files via script tags is a little foreign to me

Haha! Javascript has come a long way from when I started...!

You are right, unfortunately there is no Editor NPM package for the Javascript files as I haven't found a way to integrate that with the fact that it is commercially licensed software.

How are you currently configuring things to use DataTables? I ask because there are a number of ways of doing it - I presume something like this?:

var $ = require('jquery');
require('datatables.net')( window, $ );

If so, then you can extend that pattern and include the Editor Javascript using:

require( './scripts/dataTables.editor.js' )( window, $ );

i.e. include the Editor Javascript from a local file - signified by the ./ to give the local path.

Regards,
Allan

constaac

Allan,

Thank you so much for your response! I reconfigured things as listed above, and the datatables are working. I added the line to require the editor, and it actually loaded! Any progress is good - I was seriously struggling with that.

Now I get 'Uncaught TypeError: Cannot read property '_constructor' of undefined'
When I load the page, although it alerts me that DT editor must be initialized as a new instance.

My Javascript file looks like this fiddle - https://jsfiddle.net/yxzqqh93/

allan

Hi,

Does the browser show which line of code is giving that error?

Note that your require('datatables.net-bs') should be: require('datatables.net-bs')( window, $); - see this page.

Possibly that's what is causing the error...

Allan

constaac

If I keep require('datatables.net-bs') as is but require('./dataTables.editor.js')(window, $) as such, I am back to the alert that says "Datatables editor must be initialized as a new instance" which seems to be a much better error

allan

Hmmm, but it shouldn't be doing that since you are using new $.fn.dataTable.Editor(. If the new keyword wasn't there, then yes, that would be the correct error.

What happens if you do require the datatables.net-bs library the standard way?

Allan

constaac

What is the standard way?

allan

Using require('datatables.net-bs')( window, $);.

The datatables.net packages will return a function that you need to execute. You can optionally pass the window and jQuery objects to it - since you have them you might as well, but you do need to execute that function for it to do anything.

That package has a dependency on datatables.net (i.e. require('datatables.net')( window, $) which it should do itself.

Allan

constaac

Allan,

Though brute force, I've gotten the editor functioning! My issue now, is the edit and add buttons not opening a modal/popup. A form appears at the below the table, which edits, properly, but itsn't the typical window. Is there an event handler that I'm not taking into account?

Thanks!

tangerine

Please show your code, or preferably a link to a test case showing the issue.
https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest

constaac

https://jsfiddle.net/jdunfbz1/

constaac

npm installed, datatables, buttons, and select

constaac

Something to do with the way lightbox is functioning I think.

allan

Have you included Bootstrap's Javascript and the Editor / Bootstrap integration file (editor.bootstrap.js)?

Allan

constaac

What do you mean by Bootstrap's javascript?
When I require editor.bootstrap.js like so:

require('datatables.net-bs')
require('datatables.net-buttons')
require('datatables.net-select')

require('./dataTables.editor.js')
require('./editor.bootstrap.js')

I get:
Uncaught Error: Cannot find module "datatables.net-editor"

The requires have been working without the appended (window, $) or () with the exception of this newly required editor.bootstrap.js

constaac

Those are all my requires in main.js

The last one being added per request

constaac

Thanks a lot for your help!

constaac

I have bootstrap-sass 3.3.7 installed via npm

constaac

I tried npm installing bootstrap and requiring it prior to these requires and the error thrown is unnafected

allan

Are you able to post a link to the page so I can check it out please?

It sounds like there is a component missing, but I'm not sure if it is JS, CSS or a combination.

Allan