4

I have a small module which contains the javascript library JSmol. This library renders molecular structures onscreen. The main module is called jmol. It contains an element, a twig template, a small javascript file, and the official JSmol library.

When I create an element on the page the element renders correctly, but the admin toolbar does not. Javascript console highlights 4 places that the "once" function is used, all in the code after the vendor library was included. One example is this:

TypeError: $(...).once is not a function

  Drupal.behaviors.escapeAdmin = {
    attach: function () {
      var $toolbarEscape = $('[data-toolbar-escape-admin]').once('escapeAdmin');

my javascript file is quite simple:

(function ($, Drupal, drupalSettings, Jmol) {
  'use strict';
  Drupal.behaviors.jmol = {
    attach: function () {
      var Info = drupalSettings.jmol.mydiv.info;
      $('#mydiv').html(Jmol.getAppletHtml("jmolApplet0", Info))
    }
  };
}(jQuery, Drupal, drupalSettings, Jmol));

Is it possible that the vendor code breaks this, or is it something that I have done?

Edit: here's my jmol.libraries.yml file:

jmol:
  version: 1.x
  js:
    lib/JSmol.min.js: {}
    js/jmol.js: {}
  dependencies:
    - core/drupalSettings
    - core/jquery
    - [I've tried adding core/jquery.once here to no avail]
1
  • It turns out the version of the library I was using had jQuery built into it. There is one JSmol.min.nojq.js that requires an external version of jQuery. Jun 17, 2016 at 14:08

2 Answers 2

18

I had this happen in my custom module as well. I then noticed it worked when logged in but once I was unauthenticated my code would throw this JS error. In the end it was simply an issue where I needed the dependency you listed already in my custom module library file dependencies:

dependencies:
- core/drupalSettings
- core/jquery
- core/jquery.once

Once I added this the required JS file was included when unauthenticated as well.

For a little extra information that forced the following JS file to be included as well:

It looks like you solved your specific instance which ended up being multiple versions of jQuery being installed. I would avoid that if possible as it complicates things a bit.

0
0

I'm not a Drupal 8 guy just yet. Still very much using 7 However I did find some items that may be helpful.

once() is not a core jquery method. I think it's a jquery plugin made for drupal 7 (Source). I don't know if this plugin is included in Drupal 8.

Is this library meant to work on drupal 7 and not fully ported to drupal 8?

A simple version of once() I built for my own (non drupal) site looks like:

$.fn.once = function(processed_class)
{
  if (typeof processed_class == 'undefined')
  {
    processed_class = 'processed';
  }
  return this.not('.' + processed_class).addClass(processed_class);
};

You could add this to your code outside of any document.ready or drupal.behaviors stuff (global scope) and it may work. You may also need to include your js file before your plugin.

As for your errors and missing menu a single javascript error can block the remaining javascript form loading on the page. As admin toolbar is js it's probably never getting called.

3
  • The JMol plugin is a standalone javascript/java program. I'm making a wrapper to allow Drupal to render Jmol elements onscreen. The calls to "once" are all made by Drupal Core code. There are a few possibilities. Either the way I've wrapped the code is causing this error, or something in Jmol itself is causing this. Since "once" is an added in function, is it possible that Jmol implemented it's own version that has overridden the Drupal version? Jun 17, 2016 at 11:40
  • I doubt it being overridden. That would not result in a function not defined error. Did your core files get edited? Are you on the latest version? Are you reordering the js file includes? Does your custom file have the same name as a core js file, start looking for why a core function is never getting defined. Jun 17, 2016 at 11:51
  • There is one reference to "once" in the Jmol code "var l=!f.once&&[]". I have not touched core files, and the error only occurs on the page that includes the jmol element. yes to latest version. I don't know what you mean by "reordering js file includes". I just added my libraries.yml file above. I don't see any file names in core matching jmol, Jmol, Jsmol, or JSmol. Jun 17, 2016 at 13:25

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.