title: Loading DataTables with RequireJS in CakePHP: Issue with DebugKit
body: <p>I've reedited this question to keep it as clean as possible. I hope that doesn't bother you.</p>
  
  <p><strong>My main problem is that the jquery plugin datatables is not being loaded properly in my requirejs setup. (v1.9.4)</strong></p>
  
  <p>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.</p>
  
  <p><strong>Error: "Uncaught TypeError: Cannot read property 'defaults' of undefined " (DT_bootstrap.js)
  typeof $.fn.dataTable is undefined and it should be a function...</strong></p>
  
  <p>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.</p>
  
  <p>Here is my "data-main" script:</p>
  
  <pre><code>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');
      }
  );
  </code></pre>
  
  <p>Please also note that:</p>
  
  <ol>
  <li><p>this is how I'm running require.js: <code>&lt;script type="text/javascript" src="/js/require.js" data-main="/js/app.js"&gt;&lt;/script&gt;</code> (note that the path to the javascript folder starts by "/")</p></li>
  <li><p>if I remove "datatables" and "datatables-bootstrap" my app runs without any errors</p></li>
  <li><p>in my general.js I have other conditions that run jquery plugins assynchronously (all work except datatables)</p>
  
  <p>example: if calendar element exists, then load jquery plugin calendar script via <code>$.getScript()</code></p></li>
  <li><p>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).</p></li>
  <li><p>I have also tried using <code>"exports": 'jQuery.fn.dataTable'</code> or even <code>"exports": 'jQuery.fn.DataTable'</code> or <code>"exports": '$.fn.dataTable'</code>... all without success</p></li>
  <li><p>As a test, if I remove both datatables scripts from my config and then I run <code>$.getScript()</code> the file loads successfully but the jquery plugin is still not defined ($.fn.dataTable) and therefore I still can't use it</p></li>
  </ol>