1

I am trying to install a cookie library on a site. We are getting jQuery is not defined from the cookie library. Presumably because it is being loaded before the jQuery library. The jQuery library is being brought in through easy jQuery module I believe. I have tried to just add the jQuery CDN instead but that is not pulling through.

The error:

Uncaught TypeError: $ is not a function at centerScreen (eval at CookieControl.Dialog.globalEval

What is the best option here? The module says that it needs to be installed at the end. I am not familiar with Joomla so it is making this complicated

7
  • Could you please copy here the exact javascript error or warning from your console? And please if you can copy a short jQuery code where the error is happening. Usually this problem is occuring also when two different versions of jQuery library are loaded on the page.
    – Zollie
    Commented Jan 3, 2020 at 5:09
  • First error Uncaught TypeError: $ is not a function at centerScreen (eval at CookieControl.Dialog.globalEval Second Error: Uncaught ReferenceError: jQuery is not defined at eval (eval at CookieControl.Dialog.globalEval I have the jQuery library in the HTML - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js" type="text/javascript"></script> The cookie library is loaded higher in the HTML script. I do not know how to firstly add a more up-to-date jQuery library and secondly add it at the very top of the <head> @Zollie
    – Peter
    Commented Jan 3, 2020 at 10:35
  • Your issue is a noConflict() issue.Two additional questions to make me able to help you more precisely: Have you overridden any of the cookiebot scripts, or created any custom script for that? What is your Joomla version? I do not really see that the two main cookiebot scripts would use jQuery at all, but I need a bit more info from you.
    – Zollie
    Commented Jan 3, 2020 at 13:02
  • We are using the automatic implementation of CookieBot with Google Tag Manager. So I am not sure if we do override any scripts. Certainly nothing custom. Joomla version - 3.9.0 Thanks @Zollie
    – Peter
    Commented Jan 3, 2020 at 14:29
  • Hi there, have you found a solution on your issue in your question? What was causing the problem, if not what I wrote about? Please do not just leave subjects hanging unanswered. This way you just waste your and others’ time here. If you’ve found a solution, different than what is given in my answer, then please share it as an answer and close this subject with accepting that answer.
    – Zollie
    Commented Jan 10, 2020 at 16:20

1 Answer 1

1

I'm still a little bit blind regarding your issue but I try to give you some direction and maybe we could solve this. There are many ways to add cookiebot to the site, I have never used Google Tag Manager for that.

First about the error:

Uncaught TypeError: $ is not a function at...

When you see the above error in the console then it means that the jQuery shorthand/alias $ variable is unavailable, thus not defined as jQuery. Then a jQuery script that wants to use that variable as jQuery cannot run.

But it usually does not mean that the jQuery library is not loaded on the page. It usually means that someone wrote a jQuery script without giving enough attention to the above possible issue. And it means that jQuery library is loaded in noConflict() mode as it is the case in Joomla.

So adding only 1 or 2 lines to a jQuery script could solve this problem, however in your case I'm not sure that you can write in the jQuery code which is running on your site.

In your case, if you go to your template folder (of your default site template) in Joomla with any code editor and open the index.php file and after the line <jdoc:include type="head" /> (but before the closing </head> tag), place the following:

<script>
    var $ = jQuery; // or var $ = jQuery.noConflict(); // both can work
</script>

This one line above defines $ variable again for jQuery and the error from the console should be gone actually.

Now, this is not a nicest solution since this issue should be handled in the jQuery script itself but this is a solution now and most probably will not cause any more issues later (warning: if the template will be updated this edited part will be overridden by the update).

If you can check and edit the problematic jQuery script then you should start/wrap the jQuery function for example like this to be able to use $ inside the function:

jQuery(document).ready(function ($) { 
    // ... all your jQuery code can use now $ inside the function ... 
});

I could also write about all of the methods how you can load the jQuery framework in Joomla <head> but the jQuery library is already loaded on your pages so that is not the problem (even if it is a bit outdated version). You can read about that here if you would like to: https://docs.joomla.org/Adding_JavaScript , more precisely: https://docs.joomla.org/J3.x:Javascript_Frameworks

(I also do not consider at all the sequence of loading the libraries would be a problem of your issue, since as I see Cookiebot main scripts do not use jQuery).

Other possible cause of JavaScript conflicts in Joomla when jQuery libraries loaded together with mootols JavaScript libraries for example. You can experience quite weird behaviors without getting any errors in the console. You have to carefully check the loaded JavaScript libraries in the head and you have to disable other JavaScript libraries if you meet with these situations to see if that can help to solve the problem. So the problem with JavaScript libraries is that you cannot use some of them together when each of them tries to use $ variable on the same page.

I hope that this simple edit can help you to handle the problem.

More reference about this jQuery subject: https://api.jquery.com/jQuery.noConflict/

For alternative solution, you maybe would give a try for using a free third party Joomla plugin to add Cookiebot, for example: https://www.schrijvers123.nl/joomla/cookiebot/cookiebot-for-joomla (I have not checked this more deeply, but it looks like a simple, useful plugin).

And you can also study a bit more about how to modify the <head> of the documents in Joomla if needed: Modification of the generated Joomla head (<jdoc:include type="head" />)

UPDATE

Now I had some extra time and I have checked this issue a little more and I have found some interesting things about why the above is not a solution, but more importantly why the original question and problem is misleading in the first place.

I used the plugin I suggested above and I added Cookiebot to one of my test site to see how that works, and it took no more than like 6-8 minutes to get a fully working cookiebot on the website (using that third party Joomla plugin).

But:

  1. Cookiebot worked without using any jQuery library at all. For testing this, I unset all of the jQuery libraries from the test site so there was not a chance for jQuery at all. Cookiebot was working without any problem.

  2. I have not found any point about loading jQuery libraries in the installation guide on Cookiebot official page.

  3. If jQuery were needed for anything please load all of the 3 jQuery libraries on the page: jQuery core, jQuery UI and jQuery migrate. I mean if Google Tag Manager requires jQuery.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.