Skip to Content
Menu
This question has been flagged
3 Replies
20898 Views

Hello, I am trying to write some JQUERY code in a .js file. No matter how is write the code I get a

ReferenceError: $ is not defined

I know this is related to jquery and I looked at other .js file and they seem to reference $ just fine. What I am missing? Even this errors out


(function () { 

$(document).ready(function() {

});

}());


Avatar
Discard
Best Answer

Do you need the () at the end?

Try:

(function () {
 $(document).ready(function() {
});

});

Avatar
Discard
Author

Shawn this seems to work but I think my problem goes deeper. My code requires jquery so I need to put it at the bottom after all the other JavaScript files, would you you know how to do that?

If I understood your question correctly, I think Nedas's answer below would address it. If you could let us know more specifically what you need, we could explain better with code snippets.

Best Answer

Hello,

I am encountering an issue in Odoo 18 while working with JavaScript files for a website theme. Specifically, the plugins are throwing errors such as 'x' is not defined and similar issues.

Although jQuery (version 3.6.3) is included in the web module/package and is loaded by default in the web.assets_frontend bundle, the errors persist even when using plugins compatible with this version of jQuery.

Here are the approaches I have tried in the web.assets_frontend bundle within the __manifest__.py file:

  1. Attempted to load the assets without explicitly including jQuery, as the required plugins are already compatible with version 3.6.3.
  2. Used a direct CDN link for jQuery.
  3. Provided a local path to jQuery in the asset declaration.

My primary goal is to implement animated snippets on the website. However, despite trying the above approaches, I have been unable to resolve the issue.

I would greatly appreciate any insights or solutions to overcome this challenge.

Avatar
Discard
Best Answer

Hi Ralph,

This might mean that you include your file before the jQuery is loaded.

To make sure you include your file after jQuery library you would need to extend either "website.assets_frontend" or "website.assets_backend" depending where you use it.

See example inheritance of "website.assets_frontend" template below.

<template id="assets_frontend" inherit_id="website.assets_frontend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/module_name/static/src/js/filename.js"/>
    </xpath>
</template>

The code above extends "website.assets_frontend" and includes new JS file to the bottom (position="inside") of the list meaning all other JS files will be loaded before this.

Avatar
Discard

I am also facing the same error on loading my template. I have added my JS file in the 'assets_frontend' like you said, but it didn't resolve the problem.

Related Posts Replies Views Activity
2
Dec 24
532
0
May 23
2751
0
Sep 22
1205
2
Jul 22
11359
0
Jun 20
2217