Uncaught ReferenceError: $ is not defined

The error is at the: $(document).ready(function() {

15 Replies

put the code in a separate file, then use the defer attribute that's the simplest solution

I've not written jQuery in over a decade, but my guess is the defer on the jQuery inclusion means the script doesn't load until the document is parsed. So, the script tag right after doesn't have access to jQuery.

ἔρως•6mo ago

actually, that's not accurate the defer will load and parse the script alongside the document loading, but will only execute after everything is ready

dys 🐙•6mo ago

Whether it's parsed or not is sorta irrelevant, yes? If it's not run.

ἔρως•6mo ago

it is it's very relevant it means that the loading of the page is a lot faster

dys 🐙•6mo ago

That's true. I'll admit, but so far as the execution of subsequent code, it doesn't matter.

ἔρως•6mo ago

if you remove the defer attribute, the page stops loading until the script is received, then parses the script, then executes and then moves along subsequent code behaves differently depending on the defer attribute

dys 🐙•6mo ago

So, @0012039810328, you either need to remove the defer, or wrap all your jQuery in a:

addEventListener('DOMContentLoaded', () => {
  …jQuery here
})

addEventListener('DOMContentLoaded', () => {
  …jQuery here
})

Yeah, a library loaded with defer won't be available until the page finishes loading.

ἔρως•6mo ago

or, as i said, just move your code to a different file and set the defer attribute on it yes, but defer loads sequentially, which is a very important feature i do believe my solution is superior for 2 reasons: 1- the inline script doesn't stall the page loading (which is what will happen with that handler) 2- the code can be a lot more easily minified, which saves a ton of bandwidth, specially for mobile devices also, i would strongly suggest to wrap all your code in window.jQuery(function($) { ... });

0012039810328OP•6mo ago

Thanks, guys! To provide you with better information, the code in question is located in a PHP file named 'navbar.php'. In short, the JavaScript code is mixed with Bootstrap. Now, if I remove the 'defer' attribute, the code works as expected, but I still encounter a warning: jquery-3.5.1.min.js:2 jQuery.Deferred exception: $.ajax is not a function TypeError: $.ajax is not a function at checkExpiredIngredients (http://localhost:3000/admin/includes/expense/list_expenses.php:74:11) at HTMLDocument.<anonymous> (http://localhost:3000/admin/includes/expense/list_expenses.php:123:9) at e (https://code.jquery.com/jquery-3.5.1.min.js:2:30005) at t (https://code.jquery.com/jquery-3.5.1.min.js:2:30307) undefined S.Deferred.exceptionHook @ jquery-3.5.1.min.js:2 t @ jquery-3.5.1.min.js:2 setTimeout (async)
(anonymous) @ jquery-3.5.1.min.js:2 c @ jquery-3.5.1.min.js:2 fireWith @ jquery-3.5.1.min.js:2 fire @ jquery-3.5.1.min.js:2 c @ jquery-3.5.1.min.js:2 fireWith @ jquery-3.5.1.min.js:2 ready @ jquery-3.5.1.min.js:2 B @ jquery-3.5.1.min.js:2 This warning seems to be preventing the notification from working correctly. Interestingly, the notification appears on other pages that don't have this issue.

ἔρως•6mo ago

you picked, in my opinion, the worst of all options and that happens because you didn't do this ^ this right here

dys 🐙•6mo ago

@0012039810328, to understand why you need the line @ἔρως suggests, you'd need to understand lexical closures, which are perhaps a bit advanced. The long and the short of it is that because you're defining your functions outside the $(document).ready() method, when they are defined $.ajax hasn't been loaded yet. The non-existence of $.ajax is captured in the function definition, so even though it is defined when the function is called, it's complaining it's undefined. Anywho, to fix it, as @ἔρως said, move your function definitions inside the $(document).ready() call.

ἔρως•6mo ago

thank you for explaining it a lot better than i could however, it's actually better to move it into jQuery(function($) { ... }) there's 1 problem with using the $(document).ready() option: if, for some reason, the variable $ is overwritten or isn't available, any code relying on $ won't be happy at all oh, by the way, the latest version is 3.7.1

0012039810328OP•6mo ago

Thank you so much guys! I appreciate both your efforts a lot.

ἔρως•6mo ago

you're welcome

Gaming

Programming

Uncaught ReferenceError: $ is not defined