I am building a Django webapp and want to use a JS extension that creates a weekly schedule link. I have placed this extension in the static directory of my project and imported jQuery and the extension in the of my base.html as so:
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
<!-- jQuery schedule display (includes css and js) -->
<link rel="stylesheet" href="{% static 'Dynamic-Weekly-Scheduler-jQuery-Schedule/dist/jquery.schedule.css' %}">
<script src="{% static 'Dynamic-Weekly-Scheduler-jQuery-Schedule/dist/jquery.schedule.js' %}"></script>
Yet, when I attempt to pass data into this plugin as so:
<script type="text/javascript">
console.log({{schedule_data}})
$("schedule").jqs({{schedule_data}})
</script>
I get an error in jquery.schedule.js:
Uncaught ReferenceError: jQuery is not defined
referring to the end of this file that is:
$.fn[pluginName] = function (options) {
var ret = false;
var args = Array.prototype.slice.call(arguments);
var loop = this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
} else if ($.isFunction(Plugin.prototype[options])) {
ret = $.data(this, 'plugin_' + pluginName)[options](args);
}
});
if (ret) {
return ret;
}
return loop;
};
})(jQuery, window, document);
What am I doing wrong? Should I not be using jQuery CDN? Note that jQuery isn't defined elsewhere in the jquery.schedule.js document. Thank you
You might have to watch out about using defer when you load the CDN. defer tells the browser to wait until everything else has loaded, so in your code, the <script> tag you have at the bottom will start running first. You should remove the defer tag in the jQuery CDN and instead defer when you load your <script>. That would ensure that your jQuery library is fully loaded before you run your script.