Drupal

Drupal 8, behaviors, and jQuery Once

When porting some front-end code from Drupal 7 to Drupal 8, I ran into an unexpected change in the use of jQuery.once(). In Drupal 7, you’d do this in a behavior:

Javascript

Drupal.behaviors.exampleBehavior = {
  attach: function(context, settings) {
    $('.example', context).once('example-behavior', function() {
      // Do stuff.
    });
  },
  detach: function(context, settings, trigger) {
    $('.example', context).removeOnce('example-behavior', function() {
      // Undo stuff.
    });
  }
};

In Drupal 8, however, you can’t pass in a function to jQuery.once(), as the API for that jQuery plugin has changed. It now acts like jQuery.filter(), in that it filters out any elements that have already been processed so they aren’t processed more than once, and returns a jQuery collection. So, in Drupal 8, the example would be:

Javascript

Drupal.behaviors.exampleBehavior = {
  attach: function(context, settings) {
    $('.example', context).once('example-behavior').each(function() {
      // Do stuff.
    });
  },
  detach: function(context, settings, trigger) {
    $('.example', context).removeOnce('example-behavior').each(function() {
      // Undo stuff.
    });
  }
};

Tags: 

Drupal 8 contextual links are locally cached in sessionStorage

I ran into a seriously confusing issue with a project that I’m learning the internals of Drupal 8 for: custom contextual links were not reliably appearing or even disappearing after removing them from code, and the only thing that seemed to work was to fully uninstall  and reinstall the custom module, which is far from ideal. Turns out that, for whatever reason, Drupal caches contextual link markup in sessionStorage, which is why clearing Drupal’s own cache had no effect like you would expect coming from Drupal 7. Ways of dealing with this are fully clearing your browser’s cache, opening the page in a new tab (due to how sessionStorage works), or opening up your browser’s developer tools and deleting the sessionStorage entries for the entities or other identifiers. For example, for a block it would be Drupal.contextual.block.*, while for a node it would be Drupal.contextual.node.*.

Tags: