get Uncaught ReferenceError: $ is not defined console error

[Gouravdev]

I'm getting `Uncaught ReferenceError: $ is not defined` error.

I've define my js and css under, hookBackOfficeHeader() using 
$this->context->controller->addJS($this->_path . 'views/js/filename.js');

can anyone help me 

[Crezzur.com]

Did you register your hook upon installation of your module?

$this->registerHook('BackOfficeHeader')

 

[Gouravdev]

14 minutes ago, Crezzur said:

Did you register your hook upon installation of your module?

$this->registerHook('BackOfficeHeader')

 

Yes, I did it's only not working for Ps 1.7.6.5

[Crezzur.com]

18 hours ago, Gouravdev said:

Yes, I did it's only not working for Ps 1.7.6.5

Did you add it already on install or after you have installed the module? If so reset your module to install the hook.

[Gouravdev]

12 minutes ago, Crezzur said:

Did you add it already on install or after you have installed the module? If so reset your module to install the hook.

after installed the module.

[Crezzur.com]

3 minutes ago, Gouravdev said:

after installed the module.

Reset your module then other while your module hook is not registered

[Gouravdev]

6 minutes ago, Crezzur said:

Reset your module then other while your module hook is not registered

I fixed it with $this->context->controller->addJquery(); before calling module js

[Gouravdev]

On 6/4/2021 at 4:51 PM, Crezzur said:

Reset your module then other while your module hook is not registered

Hi 
the error is coming on module manager now  

 

    public function hookBackOfficeHeader()
    {
        $this->context->controller->addJquery();
        $this->context->controller->addCSS($this->_path . 'views/css/file.css');
        $this->context->controller->addJS($this->_path . 'views/js/file.js');
        Media::addJsDef([
            'base_url' => $this->context->link->getAdminLink('fileTab'),
        ]);
    }

[Crezzur.com]

@Gouravdev

 

Post your addJquery function, there is an error in that function.

[Gouravdev]

2 minutes ago, Crezzur said:

@Gouravdev

 

Post your addJquery function, there is an error in that function.

$(document).ready(function () {

    /*------ Tabs functionality --------*/
    $('#tabOrder a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })

 

[Crezzur.com]

    /*------ Tabs functionality --------*/
    $(document).on('click', '#tabOrder a', function(clicked) {
        clicked.preventDefault()
        clicked.tab('show')
    });

Not sure if the error is here, try to use the code above which works better on dynamically created content.

[Gouravdev]

2 minutes ago, Crezzur said:

    /*------ Tabs functionality --------*/
    $(document).on('click', '#tabOrder a', function(clicked) {
        clicked.preventDefault()
        clicked.tab('show')
    });

Not sure if the error is here, try to use the code above which works better on dynamically created content.

Didn't worked the error remains. The issue is in `$(document).ready(function () {`

 

[Crezzur.com]

1 minute ago, Gouravdev said:

Didn't worked the error remains. The issue is in `$(document).ready(function () {`

 

Using $(document).on('click', you can remove the `$(document).ready(function () {` part its not needed anymore.

[Gouravdev]

Uncaught ReferenceError: $ is not defined the error still remains

[Crezzur.com]

This is a global error, show me where the error start.

Does this error come when you click? If so show me the html of the button / tab where you click on

[Gouravdev]

I've removed everything from my JS file now it have only this 

 

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

The error is coming on the module manager page. 

In console 


 

This error is only coming for PS 1.7.6.5 to 1.7.6.9 version.
 

[Crezzur.com]

1 minute ago, Gouravdev said:

I've removed everything from my JS file now it have only this 

 

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

The error is coming on the module manager page. 

In console 


 

This error is only coming for PS 1.7.6.5 to 1.7.6.9 version.
 

Check your page to see if your javascript file is called after jquery and not before.

[Gouravdev]

1 minute ago, Crezzur said:

Check your page to see if your javascript file is called after jquery and not before.

How I can check this? 
and How I can make it possible?

Edited June 7, 2021 by Gouravdev (see edit history)

[Crezzur.com]

Check your page source when your page is loaded. If your java-script is loaded like below its fine

 

<script type="text/javascript" src="/storea/js/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/storea/js/jquery/bo-migrate-mute.min.js"></script>
...
<script type="text/javascript" src="/storea/backoffice/yourscript.js"></script>

 

[Gouravdev]

Here
 

[Crezzur.com]

Ill guess the red markings is your module, then you called your JS to soon.

[Gouravdev]

Yes, How I can fix it?

[Crezzur.com]

Try to install this hook displayBackOfficeHeader  and see if it resolves your issue.

[Gouravdev]

28 minutes ago, Crezzur said:

Try to install this hook displayBackOfficeHeader  and see if it resolves your issue.

Didn't worked  

[lingmaaki]

On 6/7/2021 at 2:12 PM, Gouravdev said:

Uncaught ReferenceError: $ is not defined the error still remains

If you are using any script file and getting "Uncaught ReferenceError: x is not defined " which means ‘x’ is either a variable or a method which you are trying to use before declaring it using var keyword. This means that there is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or scope otherwise , it will endup throwing this ‘x’ is not defined error . This usually indicates that your library is not loaded and JavaScript does not recognize the ‘x’.

To solve this error: Load your library at the beginning of all your scripts.

There can be multiple other reasons for this issue:

• Conflict with Other Libraries
• Path to your library included is not correct
• Llibrary file is corrupted
• Working offline (when you use CDN)

 

[jmauclair]

Instead of 

$(document).ready(function () { 

You can use

window.onload = function () {

It's pure JS and will not cause conflict on jquery, after the windows onload you can use $ as jquery because your page will be fully loaded