Integrating custom javascript into a CMS and the "TypeError: $ is undefined" error.

Integrating custom javascript into a CMS and the "TypeError: $ is undefined" error.


I'm nearly finished integrating a wrapbootstrap theme into Drupal. But the custom js (which words perfectly outside of Drupal) is making drupal ornery.

I was getting a js "TypeError: $ is undefined" error in:
http://noname.com/sites/all/libraries/bootstrap/js/ace-elements.min.js:"

I surrounded the code in ace-elements.min.js, as per [ https://drupal.org/node/171213 ], with the following and fixed that error. But now I get a:
"TypeError: ace.settings is undefined" in:
http://noname.com/sites/all/libraries/bootstrap/js/ace.min.js:

What's the magic behind getting third-party custom js to play nice with a CMS like drupal? Why does this problem not seem exist when integrating a jquery file? There appears to be just 3 custom js files, but fixing one just seems to break the other.

  1. (function ($) {
      // Use jQuery with the shortcut:
      console.log($.browser);
    //code here
    }(jQuery));