Datatable makeEditable() is Not a function?

Question

angular.js:11594 TypeError: undefined is not a function
at ini_table (http://localhost/ferpa-quiz-client/assets/js/controller.js:127:15)
at HTMLDocument.<anonymous> (http://localhost/ferpa-quiz-client/assets/js/controller.js:26:5)
at j (http://localhost/ferpa-quiz-client/bower_components/jquery/dist/jquery.min.js:2:26911)
at Object.k.add [as done] (http://localhost/ferpa-quiz-client/bower_components/jquery/dist/jquery.min.js:2:27220)
at n.fn.ready (http://localhost/ferpa-quiz-client/bower_components/jquery/dist/jquery.min.js:2:29326)
at new <anonymous> (http://localhost/ferpa-quiz-client/assets/js/controller.js:21:16)
at e (http://localhost/ferpa-quiz-client/bower_components/angular/angular.min.js:37:96)
at Object.instantiate (http://localhost/ferpa-quiz-client/bower_components/angular/angular.min.js:37:207)
at http://localhost/ferpa-quiz-client/bower_components/angular/angular.min.js:76:267
at link (http://localhost/ferpa-quiz-client/bower_components/angular-route/angular-route.min.js:7:248) <div ng-view="" class="ng-scope">

This is the error I am getting and blow is my code. Everything works after removing .makeEditable().

$("#questiontable").DataTable(
            {
                bAutoWidth: true,
                bProcessing: true,
                ajax: '../api/ferpa-quiz/public/getallquestion',
                sDom: '<"$grid-toolbar"sF>tr<"dataTables-footer"ilp>',
                iDisplayLength: 5,

                aoColumns: [
                    { 
                        mData: 'QUESTION',
                        sTitle: "QUESTION"

                    }


                ]

            }
        ).makeEditable();

Html

<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<link href="bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="bower_components/ediTable/jquery.dataTables.editable.js"></script>
<script src="bower_components/jeditable/js/jquery.jeditable.js"></script>

Things I have tried: 1. switching 'D' to 'd'. Neither works 2. change the order of script references. Doesn't work.

JQuery 1.10.2 Datatable makeEditable() is Not a function

You're only referencing 2 out of the 6 required scripts in this post. If you are referencing the other 4 please include them in your example - in the correct order - that way we can eliminate that issue as a possibility. `jquery.jeditable.js` is required for this to work as well. — wahwahwah, Jan 08 '15 at 15:45
https://code.google.com/p/jquery-datatables-editable/wiki/HTMLSource I found it. Thank you. — , Jan 08 '15 at 16:10
I posted the answer anyway, as it was nearly finished. Let me know if your code works, and if not, I'll help you troubleshoot the rest. — wahwahwah, Jan 08 '15 at 16:14

score 1 · Accepted Answer · answered Jan 08 '15 at 16:13

Script Order:

From your example, it could be that the scripts are being loaded out of order. The example given on the dataTables website has the scripts loaded in this order:

jquery.min.js
jquery.dataTables.min.js
jquery.jeditable.js
jquery-ui.js
jquery.validate.js //not sure this one is strictly needed
jquery.dataTables.editable.js

jeditable is a required script as dataTables.editable calls it. That also means jeditable needs to be loaded before dataTables.editable.

JQuery in Angular JS:

I'm not terrible familiar with angular js, but from their documentation...

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

And, JQLite is not the same as JQuery... You need JQuery for dataTable. Note:

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

So, the version matters as well.

Datatable makeEditable() is Not a function?

1 Answers1