By peterk900 on

I'm struggling with Javascript functionality and want to add jQuery to every page as well as a CDN link. I thought the first could be solved by amending the main theme library - e.g.

global:
  js:
     core/jquery

but this doesn't work. I've sifted through a lot of posts but can find an example of either use case. (I can achieve both of these requirements by CDN url's between <script> tags on a Basic Page.)

Any help much appreciated. Thanks.

⋅ Categories: Drupal 11.x

Comments

ressa’s picture

ressa
he/him
commented

I am not a JavaScript developer at all, but it seems like jQuery is still available in Drupal 12, after checking with this command in the Firefox console:

$ var foo = jQuery('H1');
$ foo;
Object { 0: h1.title.page-title, length: 1, prevObject: {…} }
0: <h1 class="title page-title">
length: 1

But you could share your use case here, in case someone can suggest a plain JavaScript solution?

About CDN's, see CDN / externally hosted libraries > Adding assets (CSS, JS) to a Drupal module via *.libraries.yml.

peterk900’s picture

peterk900 commented

That link was useful.  And what you found out about D12.

Returning to my wish to include jQuery on each page...

This script displays a jQuery dropdown in a Drupal article;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script><style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
}
</style>
<div id="flip">
    Click to slide down panel
</div>
<div id="panel">
    Hello world!
</div>

But when I remove the CDN link to jQuery and update libraries.yml, it fails, without error.

I have cloned Olivero. This is libraries.yml, where I have added a dependency on jQuery.

# Main theme library.
global:
  js:
    js/olivero-clone.js: {}
    dependencies:
      - core/jquery:
  css:
    base:
      css/base/elements.css: {}
    component:
      css/component/block.css: {}
      css/component/breadcrumb.css: {}
      css/component/field.css: {}
      css/component/form.css: {}
      css/component/header.css: {}
      css/component/menu.css: {}
      css/component/messages.css: {}
      css/component/node.css: {}
      css/component/sidebar.css: {}
      css/component/table.css: {}
      css/component/tabs.css: {}
      css/component/buttons.css: {}
    layout:
      css/layout/layout.css: {}
    theme:
      css/theme/print.css: { media: print }

The .info file is unaltered...

name: Olivero_Clone
type: theme
base theme: olivero
description: A flexible theme with a responsive, mobile-first layout.
package: Custom
core_version_requirement: ^10 || ^11
libraries:
  - olivero_clone/global
regions:
  header: Header
  primary_menu: Primary menu
  secondary_menu: Secondary menu
  hero: Hero (full width)
  highlighted: Highlighted
  breadcrumb: Breadcrumb
  social: Social Bar
  content_above: Content Above
  content: Content
  sidebar: Sidebar
  content_below: Content Below
  footer_top: Footer Top
  footer_bottom: Footer Bottom

Can anyone suggest what I'm doing wrong?

ressa’s picture

ressa
he/him
commented

You're welcome @peterk900, I am glad to hear it was useful.

About the theme, you write "clone", but why not create a sub-theme?

In Olivero's olivero.libraries.yml, the dependencies items are only indented one level (two spaces):

global-styling:
  aggregate_target:
    css: true
  version: VERSION
  fonts:
    fonts/metropolis/Metropolis-Regular.woff2:
[...]
  js:
    js/checkbox.js: {}

  dependencies:           <<<< THIS ONE
    - core/drupal
    - core/once
[...]

But, more importantly -- I do not see jQuery mentioned, maybe jQuery support is added by Drupal core?

peterk900’s picture

peterk900 commented

Thanks for your continued help on this.

The spacing for the dependencies was wrong. And my words were careless. I am working with an Olivero sub-theme.

I've corrected the spacing problem...

global:
  js:
    js/olivero-clone.js: {}
  dependencies:          
    - core/jquery
    - core/drupal
    - core/once

But it still doesn't work.

I understand that jQuery is part of core in D11 but jQuery UI is not. So I installed the jQuery UI module and cleared cache but, sadly, this has had no effect. 

This link refers to D11, jQuery 4 and Bootstrap theme problems but as I'm not using Bootstrap, I can't see this as relevant.

I'm not sure what else to try!

ressa’s picture

ressa
he/him
commented

Glad that it got more correct :) Too bad it doesn't work ...

But since jQuery seems to now be difficult to get working in Drupal 11, maybe it is better to aim for a JavaScript solution, hopefully someone has a tip about that.

peterk900’s picture

peterk900 commented

You may be right. JavaScript today has many of the features which jQuery provides. It’s just I’m used to jQuery!

jaypan’s picture

jaypan
Location Victoria, BC
commented

Your current declaration of dependencies looks correct. I'm sure you cleared your cache after doing it, but did you clear your cache after doing it? Upon doing so, I would look at the generated HTML to verify whether the jquery library is being included. I'm not seeing any reason it shouldn't be. If it's not, this would seem like a bug, but lets start there.

Contact me to contract me for D7 -> D10/11 migrations.

peterk900’s picture

peterk900 commented

I've only just noticed your response. I'm back on the case and I'll carry out the checks you suggest. 

peterk900’s picture

peterk900 commented

jQuery is being loaded from core...

<script src="/web/core/assets/vendor/jquery/jquery.min.js?v=4.0.0"></script>

both with and without the presence of  a CDN link.

This code...

if (typeof jQuery !=undefined) { alert(jQuery.fn.jquery);

pops up the CDN version - 3.7.1. 

So it seems to be that the core version of jQuery is loaded when the page is displayed but the script does not use the core code. But a CDN script, as part of page content, is processed and so the jQuery functionality works.

If there is anything I can try to throw light on what's happening, please let me know.

Update

I think the problem may be related to writing HTML/Javascript using Full HTML and in Source mode which means using CKEditor.

When I create a new text format without a text editor and set no options, I find a jQuery example script runs without the need for a CDN - which means it's using the jQuery code which comes from core. At a stroke, this may solve all the above issues!  Interestingly, including a CDN link appears to have no effect. 

I'll play with this a little more and post again but I'm fairly convinced CKEditor was responsible for the problem.