Different jQuery versions for frontend and backend

I have a question regarding different versions of jquery in Plone 5.2 (I think it's also applicable for Plone 5.0 and 5.1)

We have an static HTML + CSS + JS theme provided by an agency that uses latest bootstrap 4.1.x and jquery 3.3.1. When integrating the theme into Plone, we have prepared a Diazo theme and the site is OK for anonymous users.

Nevertheless, if I login to the site things start breaking because this version of Plone ships with jquery 1.11, and thus it's needed for the toolbar to work or to make the Plone mockup patterns work. After seeing that, we enabled the Plone provided JS files only for admin users, but now we have clashes between the 2 versions of jquery.

I can disable the frontend jquery version, not to show it when logged in, but some features of the site may not work correctly.

Has anyone faced something similar? How have you solved it?

for this case we use https://docs.plone.org/adapt-and-extend/theming/barceloneta.html#using-the-barceloneta-theme-only-for-the-backend.

The toolbar will still work but not as well. You will likely have issues with things like date widgets on easyform forms or similar but generally you can get around that with some diazo or just avoiding them. Same with quicksearch.

We are already using that, but as you say the toolbar has sometimes glitches

We have finally addressed this this way: we have reordered the HTML script tags so, we first serve our design's JavaScript, then we have added a jQuery noConflict call, and finally only for logged-in users, all Plone JavaScripts.

1 Like

Hi @erral, can you give any more specific information or code examples on how you got this to work? We are facing the exact same issue with a theme we are implementing based off of Bootstrap 4.2.1 and jQuery 3.4.1.

I am serving the Javascript exactly as you describe, and it definitely helped, but when logged in, I am still seeing errors that seems to be due to conflicts from the two versions of jQuery. The noConflict call doesn't seem to make a difference. Were you able to get it to work with a simple call like the following before just before the Plone JS?

<script>
  $.noConflict();
</script>

Any additional pointers would be appreciated.

Sure.

This is a Plone 5.2 site with python 3: https://www.ulmaarchitectural.com

We have the following snippet in the rules.xml file:

<after theme-children="/html/head">
    <script src="{$portal_url}/++theme++ulma-architectural/dist/83a48218.main-compiled.cache.js"/>
</after>
<after theme-children="/html/head" css:if-not-content="html > body.userrole-anonymous">
    <script src="{$portal_url}/++theme++ulma-architectural/js/noconflict.js"/>
</after>
<after theme-children="/html/head" content="/html/head/script" css:if-content="html > 
  body.template-vanguardview.userrole-anonymous"/>
<after theme-children="/html/head" content="/html/head/script" css:if-not-content="html > 
   body.userrole-anonymous"/>

The contents of the 'noconflict.js' file are:

var $jq1 = jQuery.noConflict(true);

In this site we handle the CSS and JS outside Plone, so Resource Registries is not involved in the public site theming. For the logged-in site, we had to add the noconflict.js thing not to have clashes between the jquery version needed by the public-site and that provided by Plone.

1 Like