How to fix $.fn.dataTable.Editor is not a constructor?
How to fix $.fn.dataTable.Editor is not a constructor?
madusanka
Posts: 20Questions: 7Answers: 0
i saw many quetions regarding with this problem. but i couldn't find a solution
here is my code
async getCustomers(){
let self = this;
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
data: function (data) {
data.token = localStorage.getItem("token")
},
'url': '/api/v1/customers',
},
table: "#customer_list",
fields: [ {
label: "First name:",
name: "first_name"
},
]
} );
$('#customer_list').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
buttons: { label: '>', fn: function () { this.submit(); } }
} );
} );
this.dataTable = $("#customer_list").DataTable({
serverSide: true,
dom: "Bfrtip",
ajax: {
data: function (data) {
data.token = localStorage.getItem("token")
},
'url': '/api/v1/customers',
dataFilter: function (data) {
var json = jQuery.parseJSON(data);
var response = json.data.searchResults;
self.customers = response.customers;
json.data = response.customers;
json.recordsFiltered = response.recordsFiltered;
json.recordsTotal = response.recordsTotal;
//console.log(1,JSON.stringify(json))
return JSON.stringify(json);
}
},
columns: [
{data: "id"},
{data: "first_name"},
{data: "last_name"},
{data: "email"},
],
select: {
style: 'os',
selector: 'td:first-child'
},
});
$('#customer_list').DataTable().destroy();
} );
},
This question has an accepted answers - jump to answer
Answers
i'm developing vue+laravel application and in my welcome.blade file i've imported below cdns
should i purchased license?
Hi @madusanka ,
It's definitely a licensed product - so you either need to initiate a 14 day trial or purchase the license. You're using the Editor file from our site, which won't work - you need to host either the trial version or the purchased version locally, see here.
Cheers,
Colin
thank you @colin
so , dear @madusanka what was the problem ? can you fixed? because i download the editor trial , use the library donwloaded but receive the same error "Uncaught TypeError: $.fn.dataTable.Editor is not a constructor" ... can you help me please, thanks a lot in advance,
@aseverinom It would say that if you've got an unlicensed copy of Editor, your trial has expired, or you just haven't included the files.
Have you purchased Editor? Or when did you start your trial?
Colin
hi @colin, thanks for you reply .. but yesterday I downloaded the JS+CSS and move to libs to local address and put into my code ....script type="text/javascript" src="libs/Editor-2/js/dataTables.editor.js" ... but receive the error again...
so, if I have the trial why have the error "Uncaught TypeError: $.fn.dataTable.Editor is not a constructor" so please can you clarify .. I'll purchase the product if result my test..
thanks a lot in advance,
dear @coli, I purchased a license and open a new discussion on https://datatables.net/forums/discussion/68721/ thanks for your help
OK, thanks for the purchase, I've replied in that new thread.
Colin
same problem here
If you are having the same issue, could you give me a link to your page showing the issue so I can debug it and help address it please. It basically means that Editor hasn't been loaded or isn't available on the page for some reason.
Allan
Hi allan,
I am also having the same issue scratching my head from 10 days, I have created new rails project installed datatables using yarn and downloaded editor from trial version which I created just now. And required files below in application.js as
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
global.jQuery = require('jquery');
global.$ = require( 'jquery' );
import $ from "jquery";
import "jszip";
import "pdfmake";
import "datatables.net-dt";
import "datatables.net-editor";
import "datatables.net-editor-dt";
import "datatables.net-autofill-dt";
import "datatables.net-buttons-dt";
import "datatables.net-buttons/js/buttons.colVis.js";
import "datatables.net-buttons/js/buttons.html5.js";
import "datatables.net-buttons/js/buttons.print.js";
import "datatables.net-colreorder-dt";
import "datatables.net-datetime";
import "datatables.net-fixedcolumns-dt";
import "datatables.net-fixedheader-dt";
import "datatables.net-keytable-dt";
import "datatables.net-responsive-dt";
import "datatables.net-rowgroup-dt";
import "datatables.net-rowreorder-dt";
import "datatables.net-scroller-dt";
import "datatables.net-searchbuilder-dt";
import "datatables.net-searchpanes-dt";
import "datatables.net-select-dt";
import "packs/material_category";
Rails.start()
Turbolinks.start()
ActiveStorage.start()
And replaced editor files in nodemodules with the files from trial version. and I am loading jquery from external source
to make sure JQuery loads only once.
But still I am seeing this issue below
Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
js material_category.js:3
jQuery 13
Please help me , if this succeedes then only I can purchase the Datatables licenced version
and also I uploaded configuration through debugger which you can see here
https://debug.datatables.net/enihir
Thanks in advance!
Hi,
What are you using as a bundler - Vite, WebPack or something else? Do you know what mode it is running in - ESM or CommonJS? Are you able to PM me a link to your repo so I can look into it and see what is going wrong?
Allan
I am currently using Webpack only and please find the repo link here its just a sample program I am working on to see datatables working or not https://bitbucket.org/vijayk084/erp/src/master/
Hi Alan,
Is there any update on this. If you need more info let me know. Actually we are in little bit short on the deadline
Hi,
Could you give me the command sequence to build and run your sample program?
Thanks,
Allan
Use importmap to include js libraries in rails...
https://eagerworks.com/blog/import-maps-in-rails-7
Then use <script type="module"> at the bottom of erbs to initialize DataTable; not in application.js
Dear Allan,
Please find the REadme file here https://bitbucket.org/vijayk084/erp/src/master/README.md which has all the required info to setup the application
Dear Guy,
I am new to importmaps, I tried it but couldnt success to start the app. If there is any example you have with datatables in it it would help me to get started testing these
I'm having the same exact issue. Purchased a license; set up a very bare example on CodePen. Been trying for the last month to integrate Editor into Vue3 with no success. Any guidance would be much appreciated.
I'm using the same source files in my CodePen as found in the example here: https://editor.datatables.net/examples/simple/simple.html
Hi Alan,
Could you please let me know if there is any update on this.
@Chiragsss Apologies, I totally lost track of this thread!
I've just tried the Bitbucket repo and get the server started, but when I open the page I get an error:
I've tried creating the images directory, but it doesn't seem to make any difference. Any ideas?
Allan
@DaveyJake - The CodePen isn't working because it is using the hot linked file from
https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js. That file will refuse to run on anything other than datatables.net domains. It should actually throw an error on the console saying that is the case - I'll look into why that isn't happening. Using your local copy should do the job. If it doesn't can you give me a link to your page?Allan
I bumped into the same issue and the code below did the trick for me:
Using Editor 2.1.0
Note: the code above uses laravel and vitejs.
Vite will include the ESModule if it is present, which it now is. So yes, if you are bundling, rather than loading it in the browser with the UMD, then you might need to make a change.
Allan