I have integrated boiler plate with Codeigniter. I am using codeigniter templates. When I am calling any jQuery inline functions in a page it says '$ is not defined' in the console. So I copied the jquery code and put it in the main.js file and it worked. However when I am including any script file in this page which is dependent on the jquery plugin, it shows me the same jquery undefined error. Please help me!!
@WillemLabu is correct, you can't use jQuery before it is defined. You must place your scripts that use jQuery after jQuery is included in the page.
The Boilerplate puts the scripts in the footer because typical Applications would run their javascript from external scripts in the footer.
The solution is
You might do this like this:
head.php
<html>
<head>
...
<!-- define a global object to attach your scripts to -->
<script type="text/javascript">APP_READY = { callbacks: []};</script>
</head>
yourView.php
<!-- add your inline scripts inside the APP_READY namespace -->
<script type="text/javascript">
// MODULE
APP_READY.callbacks.push(function() {
alert('simple example of APP_READY Callback');
});
</script>
anotherView.php
<script type="text/javascript">
// MODULE
APP_READY.callbacks.push(function() {
var exampleModule = [];
exampleModule.init = function() {
alert('modular example of APP_READY Callback');
};
exampleModule.init();
});
</script>
foot.php
<!-- include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- execute your Object -->
<script type="text/javascript">
(function($) {
'use strict';
// Initialise the callbacks
//
for (var i =0; i<APP_READY.callbacks.length; i++ ) {
var callback = APP_READY.callbacks[i];
if(callback && typeof callback == 'function') {
callback();
}
}
})(jQuery);
</script>