2

I am following an example here to create dataTables in a SPA using durandal and knockout js and requirejs. I keep getting an error "Cannot read property 'dataTable' of undefined ". My viewModel looks like so:

define(['knockout', 'jqueryData', 'datacontext'],
    function (ko, jqueryData,dtx) {

        function activate() {
            var testData = dtx.dataSets();

            $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

            $('#example').dataTable({//Error here: dataTable undefined 
                "data": dtx.dataSets(),
                "columns": [
                    { "title": "Engine" },
                    { "title": "Browser" },
                    { "title": "Platform" },
                    { "title": "Version", "class": "center" },
                    { "title": "Grade", "class": "center" }
                ]
            });
            return;
        }


        var compositionComplete = function () {

        }
        var vm = {
            activate: activate,
            compositionComplete: compositionComplete
        };

        return vm;
    });

in my main.js i have :

'jqueryData': '../scripts/jquery.dataTables',

Any pointers on what i am missing. Thanks

mboko
  • 359
  • 6
  • 16
  • Put a breakpoint on the error line, and add a watch for `$('#example').jqueryData`, does it show up as undefined? – Zack Mar 13 '15 at 16:38
  • 2
    is the `#example` html element your table element? Because I think you would just do `$('#example').dataTable({ [your options here] });` to make it work. I'm not sure why you have the jqueryData reference between them. – Zack Mar 13 '15 at 16:43
  • I have removed jqueryData. Now i get "TypeError: undefined is not a function". If i go F11 on my break-point it takes me to this line of code in jquery: return new 'jQuery.fn.init( selector, context ); 'where my selector is #example and context is undefined – mboko Mar 13 '15 at 16:48
  • OK, on your breakpoint, is `$.prototype.dataTable` a function, or is it undefined? If it is undefined, then you need to make sure the dataTables.js library is getting loaded before your script runs. If `$.prototype.dataTable` is a function, then you need to make sure that `$('#example')` is defined. Maybe the #example element is not found by jQuery? – Zack Mar 13 '15 at 16:54
  • Did you just forget to put the .js on the end of your jqueryData line? You say you have your main.js including `'jqueryData': '../scripts/jquery.dataTables',` but should it be `'jqueryData': '../scripts/jquery.dataTables.js',` to reference the actual .js file? – Zack Mar 13 '15 at 16:59
  • It still is undefined. But Jquery gets my selector #example. Also i checked in fiddler, jquery.dataTables is loaded as is without the .js – mboko Mar 13 '15 at 17:03
  • `$.prototype.dataTable` is undefined? if `$.prototype.dataTable` is undefined, that means the dataTables plugin has not been applied yet at that point. – Zack Mar 13 '15 at 17:06
  • OK, i am following, since i have it in main.js as jqueryData can't i add it as dependency then do something like : jqueryData.dataTable or I have tried using a compositionComplete but it's still not working for me – mboko Mar 13 '15 at 17:10
  • That sounds like durandal stuff.. I have no experience with durandal, sorry! – Zack Mar 13 '15 at 17:13
  • thanks for the prompt help. Will keep looking – mboko Mar 13 '15 at 17:14
  • I made the dataTables example you linked into a jsfiddle.net example at http://jsfiddle.net/0sbdn05h/ It works there, so maybe you can take a look at it and see what you might be doing wrong. – Zack Mar 13 '15 at 17:21
  • I think It is better to go with Knockout Custom binding handler ref : http://knockoutjs.com/documentation/custom-bindings.html, it is easy to append any plugings to an element. – Sivanraj M Mar 13 '15 at 17:41
  • @SivanrajM not sure how exactly to use custom Knockout Custom binding handler in my case hre – mboko Mar 14 '15 at 06:54
  • @mboko try this fiddle you can get some idea about Custom binding handler for dataTable http://jsfiddle.net/SivanM/w4n96pno/2/ – Sivanraj M Mar 17 '15 at 09:15

0 Answers0