$.fn.dataTable.Editor is not a constructor - RequireJS with DataTables

saneesh

I'm trying to implement CRUD operation using datatableseditor using Backbone, RequireJS and Datatables.But I'm getting the error message:

$.fn.dataTable.Editor is not a constructor"

What could be the reason?

Here is my configuration:

require.config({
baseUrl: 'js',
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatablesTableTools: 'vendor/dataTables.tableTools.min',
datatablesEditor: 'vendor/dataTables.editor.min'
},
shim: {
jquery : {
exports : '$'
},
datatables: {
deps: [
'jquery',
]
},
datatablesTableTools: { deps: ['datatables'] },
datatablesEditor: { deps: ['datatables'] }
}
});

Using it as follows:

require(["jquery", "datatables"], function () {

var editor = new $.fn.dataTable.Editor( {
"ajax": "table.line.php"
} );

$('#myGrid').dataTable( {
"aaData": [
['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version" },
{ "sTitle": "Grade" }
],
"tableTools": {
"sRowSelect": "os",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});
});

allan

Sounds like Editor isn't being loaded. Editor 1.3.0-1 is actually defined as a named module (datatables-editor) so I think you would need to use that name. Alternatively I'd suggest modifying the Editor source slightly to either have it match your own name or removing the named module part (i.e. the 'datatables-editor', in the code). think that is a change I'm going to make for 1.3.2, and all of the other extensions as well, but I need to look into it a little more before confirming that.

Allan

saneesh

Hello Allan,
Thank you for your reply!

You mean, change the following line:
var editor = new $.fn.dataTable.Editor( { "ajax": "table.line.php" } );
to
var editor = new $.fn.datatables-editor.Editor( { "ajax": "table.line.php" } );

If so, it is not working, still it shows the same error.

and another option you mentioned, in the file dataTables.editor.min.js(1.3.1) there is no word 'datatables-editor'.

To make issue more clear, let me tell you the issue in some other way:
How to configure datatables-editor with RequireJS?
What should be in require.config({}) and require([], function(){})

//San.

allan

No, I mean the requireJS code that you are using should refer to datatables-editor not datatablesEditor. $.fn.dataTable.Editor is the constructor.

and another option you mentioned, in the file dataTables.editor.min.js(1.3.1) there is no word 'datatables-editor'.

I suppose there wouldn't be in the trial code as it is encoded - sorry.

To make issue more clear, let me tell you the issue in some other way: How to configure datatables-editor with RequireJS?

I'm going to be researching this and writing a blog post about it soon. I don't have an immediate answer at the moment. Can you just do regular <script> include?

Allan

saneesh

Hello Allan,
I have no other way that's why I'm using <script> tab. it is working fine and it saved my time too. :-)

I will give you the code which I wrote, if you have time please consider this also:

require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min',
        datatables: 'http://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.0/js/jquery.dataTables.min',
        datatablesTools:'http://cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/TableTools.min',
        datatablesEditor: 'http://isocia2.com/cms/js/DataTables-1.9.4/extras/Editor-1.2.3/media/js/dataTables.editor'
    },
    shim: {        
        datatables: {deps: ['jquery'],exports: "datatables" },
        datatablesTools: {deps: ['datatables']},        
        datatablesEditor: {deps: ['datatables', 'datatablesTools']}
    }
});
require(["jquery"], function($) {
var editor = new $.fn.dataTable.Editor( {});
});

saneesh

Sorry I don't know how to format it.

allan

Thanks for posting this up.

For reference, the formatting is Markdown.

I also note that you are using an old version of Editor, which explains at least part of the issue! There is no AMD loader in that version.

Allan

saneesh

dataTables.editor.min.js(1.3.1) I tried earlier but not working.

AMD loader is available in 1.3.1?

In the current situation, can I use dataTables.editor with RequireJS? I read somewhere the 'shim' is for the libraries without AMD version.

allan

Yes, Editor 1.3.1 should work with AMD loading libraries as the named module 'datatables-editor'. In the 1.3.2 release I'm going to make next week I'm likely to remove the named part, so you can use it however you want.

Allan

saneesh

last two days I'm trying to make it work(using the latest Editor). but its not at all working for me. my require.config and require functions you can see in my previous comment.

Can you please tell me what mistake I did? (apart from old version of the editor)

TypeError: $.fn.dataTable is undefined
var editor = new $.fn.dataTable.Editor( {

In normal case it should work with 'shim' if the library is non-AMD, but because of some reason its not working for me

How can I fix this issue?

pritaeas

I have the same problem I think. I just downloaded the trial of 1.3.3. Using this code:

<script type="text/javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="dataTables.editor.js"></script>
<script type="text/javascript" charset="utf-8">
    var editor;

    $(document).ready(function () {
        editor = new $.fn.dataTables.Editor({});

        $('#demo')
            .dataTable({
                'language': {
                    'url': '//cdn.datatables.net/plug-ins/380cb78f450/i18n/Dutch.json'
                }
            })
            .addClass('table table-striped table-bordered');
    });
</script>

The error I get on the line with the constructor is:

Unhandled exception at line 97, column 13 in http://localhost:49809/

0x800a138f - Runtime-fout JavaScript: Kan de eigenschap Editor van een niet-gedefinieerde verwijzing of een verwijzing naar een lege waarde niet ophalen

Am using ASP.NET, why isn't it recognizing Editor?

allan

I assume that line 97 in the error message is line 9 in your code paste above?

There are two common reasons for that error:

1. Another version of jQuery is being loaded on the page
2. The Editor JS file is 404

Allan

pritaeas

Assumption correct.

1. jQuery 1.10.2 is loaded in my master page, does dataTables load it's own? If I remove the jQuery reference, I get even more errors. Or is perhaps version 1.11 required?

2. Editor is 1.3.3 (downloaded yesterday) in my local path, and I can open/read the file in the browser.

I've tried a HTML file, same error. Hope you can spot it:

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>DataTables Editor - test</title>

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="dataTables.editor.js"></script>
</head>
<body>
    <div class="container">
        <h1>DataTables Editor - test</h1>

        <table id="demo">
            <thead>
                <tr><th>Tekening</th><th>Aantal</th><th>Materiaal</th><th>Dikte</th><th>Slijprichting</th><th>Afwerking</th></tr>
            </thead>
            <tbody>
                <tr><td><a href="#">Zijwand.DXF</a></td><td>2</td><td>Slijtvast Staal RAEX 400</td><td>6.00</td><td>Y</td><td></td></tr>
                <tr><td><a href="#">Bovenzijde.DXF</a></td><td>1</td><td>Slijtvast Staal RAEX 400</td><td>6.00</td><td>X</td><td></td></tr>
                <tr><td><a href="#">Onderzijde.DXF</a></td><td>1</td><td>Slijtvast Staal RAEX 400</td><td>6.00</td><td></td><td></td></tr>
                <tr><td><a href="#">Lade.DXF</a></td><td>5</td><td>RVS-304L kgw finish 2B</td><td>1.25</td><td></td><td>Enkelzijdig</td></tr>
            </tbody>
        </table>

    </div>

    <script type="text/javascript" charset="utf-8">
        var editor;

        $(document).ready(function () {

            editor = new $.fn.dataTables.Editor({});

            $('#demo')
                .dataTable({
                    'language': {
                        'url': '//cdn.datatables.net/plug-ins/380cb78f450/i18n/Dutch.json'
                    }
                })
                .addClass('table table-striped table-bordered');
        });
</script>
</body>
</html>

Opera error console shows: Uncaught TypeError: Cannot read property 'Editor' of undefined

allan

does dataTables load it's own? If I remove the jQuery reference, I get even more errors. Or is perhaps version 1.11 required?

No it doesn't. And jQuery 1.7+ will work.

Opera error console shows: Uncaught TypeError: Cannot read property 'Editor' of undefined

I'm afraid I don't see a problem with the above code. Are you able to link me to the page? If you don't want to make the link public you can PM me by clicking my name above and then "Send Message".

Allan

pritaeas

It's only in local development, and run from Visual Studio.

Uploaded to my personal server (still the same error in the console, this is a unix hosting):

http://www.pritaeas.net/public/test.html

allan

Ah!

$.fn.dataTables.Editor

Should be:

$.fn.dataTable.Editor

:-)

No s in the jQuery extension object for dataTable! That should fix it.

Thanks for the link. I wouldn't have spotted that without being able to play with the code.

Allan

pritaeas

Aha. Yes, that removes the error. Guess I copied from the wrong source. Now I can play ;)