Override JQuery in Grav

Hi

Is it possible to override JQuery loading in Grav?

I can’t remove the JQuery line in the Assets section, in Admin. Is JQuery essential for Grav to work?

Thanks, so much.

Just checked my pages and even though I don’t use jQuery I see it’s also loaded :eyes:
If you find out how to disable easily, let us know. Otherwise I might have to take a look also some day

Are you saying this is loaded somewhere other than the theme you are using? I would expect it to depend on the theme. I’m pretty sure I recall using a theme once and adding some jQ which failed because it wasn’t loaded. (?? my memory is not to be relied upon, though :confused: )

And which theme(s) are we talking about here?

Hi @hughbris

In a fresh installation of Grav, you can find the JQuery library in " General Asset Configuration" in Admin Panel. And with the default theme (Quark) if you see the source code in browser it appears before the </head> tag.

Here you can see this:

I don’t use Quark or Admin for configuring this kind of thing, so I could be missing something.

However, everything in a theme is configurable and can be overridden in Twig.

I suspect what you are looking at is where you can set up short names for collections of assets, which your theme then uses as a shorthand. ‘jquery’ is defined in Grav core as one them, but you don’t need to make use of it (except that Quark might need it??). The non-Admin “manual” explanation is provided in grav docs.

Someone else better acquainted with Quark and Admin might do a better job of clarifying, sorry.

Edit: my point is that Grav doesn’t force any markup, you have complete freedom. It offers some shortcuts though.

Hi.

Hello.
I just set up Grav without the admin plugin and with a theme (tail) that doesn’t use JQuery. Indeed, it does not appear loaded anywhere.

But even so, in the system.yaml file, which is found in the default installation in system/config/system.yaml, the following appears by default:

   collections:
     jquery: system://assets/jquery/jquery-3.x.min.js

In my opinion, nothing should appear there, and let the user choose what they want. Moreover, in a Grav sites with admin, if you try to remove this line in Assets, Grav show the following error:

jquery_grav3

and does not allow you to remove it.

I’m using only my custom theme (the only one theme installed) and can confirm the behavior. Although just deleting the string inside second input helped

That means manual deletion on the textbox works, however the delete button throws an error message.

It looks more like an Admin plugin issue. Perhaps it is best to indicate this behavior on the Grav page on Github

Wow !!!

Grav is having strange behavior with the clear cache buttons and the pages section (it hangs). Rather it seems that JQuery is required for Grav’s admin panel to work. If removed like @Karmalakas does, it has strange behaviors (for example, it doesn’t show Grav or Plugin updates, either)

But I don’t understand that JQuery is required for the Admin plugin, and is loaded on the front page.

Yup… Nothing in Admin works that’s on AJAX
Will you file an issue on Admin repo? Or I could do that maybe tomorrow

P. S. What was the original string? :smiley: I need to put it back in


It seems I can’t even get into Assets, because tab switching is also done with jQuery :man_facepalming: Will have to upload file directly…

system://assets/jquery/jquery-3.x.min.js

1 Like

I’m repeating myself. I can’t tell I am being ignored or missing what you are getting at.

This means you can load jQuery (CSS and script) simply by referring to ‘jquery’ as a collection of assets. It does not mean your theme is using it or your page is loading it.

Admin plugin uses its own theme, which I think requires jQuery.

But that’s exactly what it means :slight_smile: If it’s there, page loads it, even if not used by theme

It does, but I have become confused about what @pmoreno is reporting so will leave this thread for others to help.

Submitted an issue

@Karmalakas, Like @hughbris I do not understand the claims that have been made…

No way to remove jQuery from frontend page load

Try the following:

  • Fresh install of Grav 1.7.33
  • Remove line 30 containing {% do assets.addJs('jquery', 101) from /user/themes/quark/templates/partials/base.html.twig

In my experience, jQuery will not be loaded using above configuration.

Please show me that jQuery is still being loaded.

/system/config/assets/collections/
The setting in /system/config/assets/collections/ is only a convenience setting to easy the loading of often used assets. Grav core does not do anything with the settings. Only themes and plugins do when adding the asset explicitly.

“In my opinion, nothing should appear there”

Since jQuery is a library that was and still is being used for many website and many themes/plugins still require it, it is more the logical that this library is predefined in /system/config/assets/collections/. Removing the setting will break existing themes and plugins that do load jQuery.

Error in Admin:
“Warning: if you save now, the element jquery, without children, will be removed, because it’s invalid YAML”

I think this error message is not ideal because the resulting yaml isn’t invalid. When ignoring the warning and saving, the entire jQuery setting (and collection because it is empty) is being removed.

However, in Admin the jQuery setting remains present and does not reflect the changes in user/system/config/system.yaml. Only this seems to be a genuine issue.

I use my custom theme and it’s the only theme (Quark removed)
My base.html.twig starts like this:

{% use 'blocks/layout.html.twig' %}
<!DOCTYPE html>
<html lang="{{ (grav.language.getActive ?: grav.config.site.default_lang)|e }}" class="h-screen min-h-screen">
<head>
    {{ block('head') }}

    {% block stylesheets %}
        {% do assets.addCss('theme://css/compiled/theme.min.css', 9) %}
    {% endblock %}

    {% block assets deferred %}
        {{ assets.css()|raw }}
        {{ assets.js()|raw }}
    {% endblock %}
</head>

{{ block('head') }} part loaded from blocks/layout.html.twig:

{% block head %}
    <meta charset="utf-8"/>
    <title>{% if header.title %}{{ header.title|e }} | {% endif %}{{ site.title|e }}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% include 'partials/metadata.html.twig' %}

    <link rel="icon" type="image/svg" href="{{ url('theme://images/logo.svg')|e }}"/>
    <link rel="canonical" href="{{ page.canonical(true)|e }}"/>

    <!-- Global site tag (gtag.js) - Google Analytics -->
{% endblock head %}

jQuery nowhere to be found in my theme :confused: And it’s still loaded together with all the assets:

As mentioned, when I delete that string from Admin, it’s not loaded anymore, but then Admin stops working properly :frowning:

@Karmalakas,

  • Please show that after the steps I’ve shown jQuery is still being loading.
  • I cannot look into your system, the theme and plugins, so I cannot judge nor test your configuration. Please provide a configuration with which I can reproduce the issue.

How can I show it, if I’m not using Quark?
When I get to my IDE later I’ll do a search on a whole project to see maybe I missed something in my theme, but for now it seems like a bug in Admin. I’ll see if I can get a simple reproduction setup

@Karmalakas,

How can I show it, if I’m not using Quark?

You could install it…

[…] but for now it seems like a bug in Admin.

What does Admin have to do with jQuery being loaded into the front-end (apart from the Admin frontend itself)?

Admin requires jQuery, hence it loads it. See javascripts.html.twig