Kevin Powell - Community•2y ago

Uncaught ReferenceError: $ is not defined

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

Ἔ

ἔρως•7/9/24, 2:02 AM

put the code in a separate file, then use the attribute

Ἔ

ἔρως•7/9/24, 2:03 AM

that's the simplest solution

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

dys 🐙•7/9/24, 2:03 AM

I've not written jQuery in over a decade, but my guess is the 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.

Ddys 🐙I've not written jQuery in over a decade, but my guess is the `defer` on the jQu...

Ἔ

ἔρως•7/9/24, 2:03 AM

actually, that's not accurate

Ἔ

ἔρως•7/9/24, 2:04 AM

the will load and parse the script alongside the document loading, but will only execute after everything is ready

Ἔἔρως the `defer` will load and parse the script alongside the document loading, but w...

dys 🐙•7/9/24, 2:04 AM

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

Ἔ

ἔρως•7/9/24, 2:04 AM

it is

Ἔ

ἔρως•7/9/24, 2:04 AM

it's very relevant

Ἔ

ἔρως•7/9/24, 2:05 AM

it means that the loading of the page is a lot faster

Ἔἔρως it means that the loading of the page is a lot faster

dys 🐙•7/9/24, 2:05 AM

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

Ἔ

ἔρως•7/9/24, 2:05 AM

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

Ddys 🐙That's true. I'll admit, but so far as the execution of subsequent code, it does...

Ἔ

ἔρως•7/9/24, 2:07 AM

subsequent code behaves differently depending on the defer attribute

Ἔἔρως if you remove the defer attribute, the page stops loading until the script is re...

dys 🐙•7/9/24, 2:08 AM

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

Ἔἔρως subsequent code behaves differently depending on the defer attribute

dys 🐙•7/9/24, 2:08 AM

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

Ἔ

ἔρως•7/9/24, 2:08 AM

or, as i said, just move your code to a different file and set the attribute on it

Ddys 🐙Yeah, a library loaded with `defer` won't be available until the page finishes l...

Ἔ

ἔρως•7/9/24, 2:09 AM

yes, but defer loads sequentially, which is a very important feature

Ἔ

ἔρως•7/9/24, 2:10 AM

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

Ἔ

ἔρως•7/9/24, 2:11 AM

also, i would strongly suggest to wrap all your code in

0012039810328OP•7/9/24, 3:38 AM

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.

Ἔ

ἔρως•7/9/24, 4:21 AM

you picked, in my opinion, the worst of all options

Ἔ

ἔρως•7/9/24, 4:21 AM

and that happens because you didn't do this

Ἔἔρως also, i would strongly suggest to wrap all your code in `window.jQuery(function(...

Ἔ

ἔρως•7/9/24, 4:22 AM

^ this right here

Ἔἔρως ^ this right here

dys 🐙•7/9/24, 7:01 AM

@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 method, when they are defined hasn't been loaded yet.

The non-existence of is captured in the function definition, so even though it is defined when the function is called, it's complaining it's

undefined

undefined

.

Anywho, to fix it, as @ἔρως said, move your function definitions inside the call.

Ἔ

ἔρως•7/9/24, 7:11 AM

thank you for explaining it a lot better than i could

Ἔ

ἔρως•7/9/24, 7:12 AM

however, it's actually better to move it into

Ἔ

ἔρως•7/9/24, 7:14 AM

there's 1 problem with using the option: if, for some reason, the variable is overwritten or isn't available, any code relying on won't be happy at all

Ἔ

ἔρως•7/9/24, 7:17 AM

oh, by the way, the latest version is 3.7.1

0012039810328OP•7/9/24, 4:38 PM

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

Ἔ

ἔρως•7/9/24, 4:44 PM

you're welcome