13.04.2026 | Pascal Crott

Restore AJAX functionality when using Slick Slider and Layout Builder

Uses new Drupal "once" Library without using JQuery (see: https://www.drupal.org/node/3158256).

content-carousel.js

          slick.on('breakpoint', function (e, _) {
            if (settings.isLayoutBuilder) {
              once.remove('ajax', '.use-ajax', _.$slideTrack[0]);
              Drupal.ajax.bindAjaxLinks(_.$slideTrack[0]);
            }
          });

Issue

When you are using Layout Builder, AJAX for a Slick Slider may break.

Prerequisites

Layout Builder with a Slick Slider and Drupal 9.X or newer are in use

Solution

Use the snippet provided to re-bind AJAX events.

Zurück zur DevBit-Übersicht

Weitere DevBits

26.02.2026 | Holger Weischenberg

Using CSS media queries and CSS variables in JavaScript

cssMediaQuery.js

// Retrieve all computed styles from the root HTML element (:root)
const rootStyles = getComputedStyle(document.documentElement);

// Get the value of the CSS variable --Breakpoint.
// Use a fallback (e.g., 768px) if the variable is not defined.
const breakpoint = rootStyles.getPropertyValue('--Breakpoint').trim() || '768px';

// Create a MediaQueryList based on the breakpoint value
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint})`);

// Function that runs when the viewport is at or above the breakpoint
function handleDesktopLayout() {
    console.log("Viewport is at or above the breakpoint.");
}

// Function that runs when the viewport drops below the breakpoint
function handleMobileLayout() {
    console.log("Viewport is below the breakpoint.");
}

// Early return for the initial state:
// If the viewport does NOT meet the breakpoint requirement, run mobile logic and exit
if (!mediaQuery.matches) {
    handleMobileLayout();
    // No desktop logic needed at this point
} else {
    handleDesktopLayout();
}

// Listen for changes in viewport size relative to the breakpoint
mediaQuery.addEventListener('change', (event) => {
    if (event.matches) {
        // The viewport just became equal to or larger than the breakpoint
        handleDesktopLayout();
    } else {
        // The viewport just became smaller than the breakpoint
        handleMobileLayout();
    }
});

29.01.2026 | Peter Gerken

Manipulate Form Data before Submit

formDataManipulation.js

// Modifies form data on submit.
form.addEventListener("formdata", (e) => {
  const formData = e.formData;
  geoLocationFieldNames.forEach((name) => {
    formData.delete(name);
  });
});

manipulating forms

functional frontend