3

Is it possible to override the native JHtml::_('jquery.framework') loaded by Joomla, using some line of php?

I understand I could replace this line in my template. But since I am using a template builder, it will just be back after a next update. That being said, I can add some php to the template before writing changes. So if there was some line of php I could use to disable the loading of the jQuery framework? That would be great.

The reason for this question is because I have a nearly perfect score in LightHouse test. But it gives me some warning the used jQuery library has some known vulnerabilities.

screenshot LightHouse warning

I have a newer version of jQuery ready in my template folders to load instead. Or does Joomla really need the 1.x version?

Any insights are most appreciated. Thanks!

| improve this question | | | | |
5

Or does Joomla really need the 1.x version?

Joomla itself may work mostly fine with newer jQuery versions. The reason it ships with such an old version is compatibility for 3rd party extensions.

So if there was some line of php I could use to disable the loading of the jQuery framework?

To disable jQuery loading completely you would have to either make a plugin to override JHtml::_('jquery.framework') or create overrides for any layouts that end up loading jQuery. The plugin can also be used to load a custom version:

defined('_JEXEC') or exit;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Plugin\CMSPlugin;

class PlgSystemExample extends CMSPlugin
{
    // Cache to allow running code only once.
    protected static $loaded = false;

    public function onAfterInitialise()
    {
        // Check that the method hasn't been used yet.
        if (!HTMLHelper::isRegistered('jquery.framework'))
        {
            // Register our custom method.
            HTMLHelper::register('jquery.framework', [__CLASS__, 'framework']);
        }
    }

    public static function framework($noConflict = true, $debug = null, $migrate = true)
    {
        // Load only once.
        if (!static::$loaded)
        {
            return;
        }

        // Load the main library
        HTMLHelper::_('script', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');

        // Check if we are loading in noConflict.
        if ($noConflict)
        {
            Factory::getApplication()->getDocument()->addScriptDeclaration('jQuery.noConflict();');
        }

        // Check if we are loading Migrate.
        if ($migrate)
        {
            HTMLHelper::_('script', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js');
        }

        // Enable cache flag.
        static::$loaded = true;
    }
}

Or, if you want to override jQuery script at the template level, place your custom script in templates/your_template/js/jui/jquery.min.js.

| improve this answer | | | | |
  • Thanks! That was very interesting and helpfull. I added the latest jQuery inside the template folder as you mentioned, resulting in a 100% score. You made my day! :) – TVBZ Feb 18 at 12:50
  • Just one note. I've noted some issues with tooltips using laster versions of jQuery (makes form field labels disappear) and there is some sloppy js that throws error messages (specifically in jQuery 1.12, don't recall testing any of the 3.x series) which can cause some issues with Bootstrap js as well. So be observant, check the console log, to be sure one of the edge cases isn't going to bite you. – Arlen Feb 18 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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