javascript - Loading DataTables with RequireJS in CakePHP: Issue with DebugKit - Stack Overflow

admin管理员组

文章数量:1354447

I've reedited this question to keep it as clean as possible. I hope that doesn't bother you.

My main problem is that the jquery plugin datatables is not being loaded properly in my requirejs setup. (v1.9.4)

I am also trying to use DT_bootstrap (which extends datatables to bootstrap). When i run my pages the console always tells me that DT_bootstrap failed because $.fn.dataTable is not defined. The problem can not be in DT_bootstrap, because I don't need it to run datatables and if I remove it from my app the error is still the same. I read here that requirejs is not ready to be normally loaded with requirejs but I've found some people that did end up implementing it successfully, most of them in different ways. So far none of the examples I've found worked for me.

Error: "Uncaught TypeError: Cannot read property 'defaults' of undefined " (DT_bootstrap.js) typeof $.fn.dataTable is undefined and it should be a function...

Before I decide to implement requirejs in my app one of my scripts (general.js) was checking if there were any tables with class "datatable" and when they exist I would run the datatables script assynchronously, which works great. I would prefer to keep it that way so that I don't load datatables code in all of my app pages, but it doesn't work. I get exactly the same error as if I was trying to load it with requirejs.

Here is my "data-main" script:

require.config({
    paths: {
        "jquery": "../vendor/jquery/jquery", // 1.9.1
        "jquery.cookie": "../vendor/jquery.cookie/jquery.cookie",
        "bootstrap": "../vendor/bootstrap/docs/assets/js/bootstrap", // 2.3.2
        "bootstrap-timepicker": "../vendor/bootstrap-timepicker/js/bootstrap-timepicker",
        "jqueryui": "jquery-ui-1.10.3.custom.min",
        "datatables": "jquery.dataTables", // 1.9.4
        "datatables-bootstrap": "DT_bootstrap",
        "modernizr": "../vendor/modernizr/modernizr",
        "general": "general"
    },
    shim: {
        "jquery": {
            "exports": 'jQuery'
        },
        "jquery.cookie": {
            "deps": ["jQuery"],
            "exports": 'jQuery'
        },
        "bootstrap": {
            "deps": ['jQuery'],
            "exports": 'jQuery'
        },
        "bootstrap-timepicker" : {
            "deps": ['jQuery', 'bootstrap']
        },
        "datatables": {
            "deps": ['jQuery']
        },
        "datatables-bootstrap": {
            "deps": ['jQuery', 'datatables', 'bootstrap']
        },
        "jqueryui": {
            "deps": ['jQuery']
        },
        "general": {
            "deps": ['jQuery', 'bootstrap']
        }
    }
});

require(
    [
        "modernizr", 
        "jquery", 
        "jquery.cookie", 
        "bootstrap", 
        "bootstrap-timepicker", 
        "jqueryui", 
        "general",
        "datatables",
        "datatables-bootstrap"
    ], 
    function () {
        //  console.log('something here');
    }
);

Please also note that:

1. this is how I'm running require.js: <script type="text/javascript" src="/js/require.js" data-main="/js/app.js"></script> (note that the path to the javascript folder starts by "/")

2. if I remove "datatables" and "datatables-bootstrap" my app runs without any errors

3. in my general.js I have other conditions that run jquery plugins assynchronously (all work except datatables)

   example: if calendar element exists, then load jquery plugin calendar script via $.getScript()

4. User dcodesmith tried to help me recently (check his answer) and ask me to try his config in my app, which didn't work. Then I tried to use it in a simple website and it worked for that simple app, but same doesn't happen in my cakephp app where javascript folder is referenced as "/js". The main differences I found were: in his app all the files were in the same folder and that doesn't happen on my app (probably related to point 1).

5. I have also tried using "exports": 'jQuery.fn.dataTable' or even "exports": 'jQuery.fn.DataTable' or "exports": '$.fn.dataTable'... all without success

6. As a test, if I remove both datatables scripts from my config and then I run $.getScript() the file loads successfully but the jquery plugin is still not defined ($.fn.dataTable) and therefore I still can't use it

I've reedited this question to keep it as clean as possible. I hope that doesn't bother you.

My main problem is that the jquery plugin datatables is not being loaded properly in my requirejs setup. (v1.9.4)

I am also trying to use DT_bootstrap (which extends datatables to bootstrap). When i run my pages the console always tells me that DT_bootstrap failed because $.fn.dataTable is not defined. The problem can not be in DT_bootstrap, because I don't need it to run datatables and if I remove it from my app the error is still the same. I read here that requirejs is not ready to be normally loaded with requirejs but I've found some people that did end up implementing it successfully, most of them in different ways. So far none of the examples I've found worked for me.

Error: "Uncaught TypeError: Cannot read property 'defaults' of undefined " (DT_bootstrap.js) typeof $.fn.dataTable is undefined and it should be a function...

Before I decide to implement requirejs in my app one of my scripts (general.js) was checking if there were any tables with class "datatable" and when they exist I would run the datatables script assynchronously, which works great. I would prefer to keep it that way so that I don't load datatables code in all of my app pages, but it doesn't work. I get exactly the same error as if I was trying to load it with requirejs.

Here is my "data-main" script:

require.config({
    paths: {
        "jquery": "../vendor/jquery/jquery", // 1.9.1
        "jquery.cookie": "../vendor/jquery.cookie/jquery.cookie",
        "bootstrap": "../vendor/bootstrap/docs/assets/js/bootstrap", // 2.3.2
        "bootstrap-timepicker": "../vendor/bootstrap-timepicker/js/bootstrap-timepicker",
        "jqueryui": "jquery-ui-1.10.3.custom.min",
        "datatables": "jquery.dataTables", // 1.9.4
        "datatables-bootstrap": "DT_bootstrap",
        "modernizr": "../vendor/modernizr/modernizr",
        "general": "general"
    },
    shim: {
        "jquery": {
            "exports": 'jQuery'
        },
        "jquery.cookie": {
            "deps": ["jQuery"],
            "exports": 'jQuery'
        },
        "bootstrap": {
            "deps": ['jQuery'],
            "exports": 'jQuery'
        },
        "bootstrap-timepicker" : {
            "deps": ['jQuery', 'bootstrap']
        },
        "datatables": {
            "deps": ['jQuery']
        },
        "datatables-bootstrap": {
            "deps": ['jQuery', 'datatables', 'bootstrap']
        },
        "jqueryui": {
            "deps": ['jQuery']
        },
        "general": {
            "deps": ['jQuery', 'bootstrap']
        }
    }
});

require(
    [
        "modernizr", 
        "jquery", 
        "jquery.cookie", 
        "bootstrap", 
        "bootstrap-timepicker", 
        "jqueryui", 
        "general",
        "datatables",
        "datatables-bootstrap"
    ], 
    function () {
        //  console.log('something here');
    }
);

Please also note that:

1. this is how I'm running require.js: <script type="text/javascript" src="/js/require.js" data-main="/js/app.js"></script> (note that the path to the javascript folder starts by "/")

2. if I remove "datatables" and "datatables-bootstrap" my app runs without any errors

3. in my general.js I have other conditions that run jquery plugins assynchronously (all work except datatables)

   example: if calendar element exists, then load jquery plugin calendar script via $.getScript()

4. User dcodesmith tried to help me recently (check his answer) and ask me to try his config in my app, which didn't work. Then I tried to use it in a simple website and it worked for that simple app, but same doesn't happen in my cakephp app where javascript folder is referenced as "/js". The main differences I found were: in his app all the files were in the same folder and that doesn't happen on my app (probably related to point 1).

5. I have also tried using "exports": 'jQuery.fn.dataTable' or even "exports": 'jQuery.fn.DataTable' or "exports": '$.fn.dataTable'... all without success

6. As a test, if I remove both datatables scripts from my config and then I run $.getScript() the file loads successfully but the jquery plugin is still not defined ($.fn.dataTable) and therefore I still can't use it

• javascript
• jquery
• requirejs
• datatables

Share Improve this question Follow edited Jan 24, 2014 at 0:33 w3jimmy asked Jan 17, 2014 at 10:28 w3jimmyw3jimmy 7121010 silver badges2121 bronze badges 13

• by the way, I'm using datatables version 1.9.4 – w3jimmy Commented Jan 17, 2014 at 12:16
• So in neither version are you loading general.js with require()? That looks like a problem. – Lyn Headley Commented Jan 17, 2014 at 18:12
• please add a ment above each require / define call saying what source filie it's in. – Lyn Headley Commented Jan 17, 2014 at 18:13
• I'm not sure if I understood your question, but I think you want to know the path of the file which is described above in paths:{} – w3jimmy Commented Jan 17, 2014 at 19:02
• I'm asking for the path of any file containing a require or define function call (or a call to require.config). What files are those calls in? How many files contain those calls? Also, see my first question. – Lyn Headley Commented Jan 17, 2014 at 19:32

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 4

Right, so what I've done is started from the bottom-up and get a bare metal configuration working.

app.js

require.config({
    paths: {
        "jquery": "jquery-1.10.2",
        "datatables": "jquery.dataTables-1.9.4.min",
        "DT-bootstrap": "DT_bootstrap"
    },
    shim: {
        "datatables": {
            "deps": ['jquery']
        },
        "DT-bootstrap": {
            "deps": ['datatables']
        }
    }
});

require(["jquery", "datatables", 'DT-bootstrap'], function () {

    $('#table_id').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" }
        ]
    });

});

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn./ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type="text/javascript" data-main="app.js" src="require.js"></script>
    <title>DataTable Bootstrap</title>
</head>
<body>

    <table id="table_id"/>

</body>
</html>

Folder Structure

Update: Use the shim below and require statement below

shim: {
    "jquery.cookie": ["jquery"],
    "bootstrap": ['jquery'],
    "bootstrap-timepicker" : ['jquery', 'bootstrap'],
    "datatables": ['jquery'],
    "datatables-bootstrap": ['datatables', 'bootstrap'],
    "jqueryui": ['jquery'],
    "general": ['jquery', 'bootstrap']
}

require(
    [
        "modernizr", 
        "jquery", 
        "datatables",
        "datatables-bootstrap"
        "jquery.cookie", 
        "bootstrap", 
        "bootstrap-timepicker", 
        "jqueryui", 
        "general"
    ], 
    function () {
        //  console.log('something here');
    }
);

I finally found the source of my problem.

I recreated a website with the same kind of routing and folders as my cakephp app and I finally found something.

I use a debug plugin in CakePHP called DebugKit, that plugin appends 2 scripts at the end of the of the document. One of them is jQuery 1.8.1 and the plugin's script which is basically a toolbar similar to a horizontal navigation.

I was always told to not worry in removing this instance of jQuery because it was being loaded in a non conflict way, it happens that once I disabled this, my requirejs config finally worked with the plugin datatables as I wanted!

I don't know why the exact reason of this conflict, but I'm quite sure it es from this part of the code: https://github./cakephp/debug_kit/blob/master/webroot/js/js_debug_toolbar.js#L59-73

I never noticed this before because I only use the datatables plugin in my admin section and the php debugger plugin is always on when I'm logged as admin.

I'll change the title to include cakephp, might be useful for someone with the same problem

本文标签： javascriptLoading DataTables with RequireJS in CakePHP Issue with DebugKitStack Overflow