jQuery issues after 3.4 Upgrade

Question

I'm having some problems with jQuery after the 3.4.5 upgrade from 3.2.2.

$ is not defined.

I've done some trouble shooting, and found this: https://stackoverflow.com/questions/17687619/is-there-a-way-turn-off-jquery-noconflict-mode-in-wordpress

but if I run:

$ = jQuery.noConflict(true); then the new issue is that jQuery is not defined.

This isn't an issue in my 3.2.2 site, where both $ and jQuery are defined.

I've tried things such as setting jQuery = $ after the noConflict statement and cloning jQuery into $ but neither of those worked.

I'm running jQuery 1.8.3 instead of the jQuery included with Joomla. I also made sure mootools wasn't beeing included.

Is there a way to get $ and jQuery to work at the same time?

Answer 1

Firstly, there's no reason why you should be using jQuery 1.8.3 as it's an old and unsupported version. Please stick with what Joomla provides (1.11.3).

The template and ALL extensions you're using should be doing the following to import jQuery:

JHtml::_('jquery.framework');

Doing so ensures that it's only imported once when the head is being compiled. It means NoConflict mode is enabled, therefore the following is added below

jQuery.noConflict();

All templates/extensions should then always write their custom JS script like so:

jQuery(document).ready(function(){  
    var element = jQuery('#element');
});

or:

jQuery(document).ready(function($){  
    var element = $('#element');
});

In the second example, you can see that I have passed $ through as an alias of jQuery.

So overall, either your template or extension developer has not followed this process, therefore you can either find the culprit and fix it, or installed the jQuery Easy plugin.

Hope this helps