Problem/Motivation

BU will occasionally show up multiple times, especially in a sites front end. Here's a video: https://www.drupal.org/files/issues/2021-03-13/bu-dupe.mp4

Steps to reproduce

Install module, add #test-bu to url. Settings probably don't matter; I've included a .yml export anyway.

Proposed resolution

If bu has already been attached to the page, skip further calls during Drupal.behaviors.bu::attach()

Attached is a patch for bu.js and my patched version of bu.js

Patch wraps normal execution with:

if(typeof settings.bu.hooked === 'undefined'){
   // window.$buoop = { ... document.body.appendChild(e);
   settings.bu.hooked = true;
}

Remaining tasks

N/A?

User interface changes

none

API changes

drupalSettings.bu adds flag; drupalSettings.bu.hooked

Data model changes

none

CommentFileSizeAuthor
#9 bu_3203410_2.1.1.patch2.47 KBpmkanse
#3 bu-2.0.1.patch2.44 KBperfectcu.be
#3 bu.js_.txt1.28 KBperfectcu.be
bu.js_.txt1.29 KBperfectcu.be
bu-2.0.1.patch2.54 KBperfectcu.be
bu.settings.yml375 bytesperfectcu.be
bu-dupe.mp4713.67 KBperfectcu.be

Issue fork bu-3203410

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

perfectcu.be created an issue. See original summary.

perfectcu.be’s picture

perfectcu.be commented
Version: 8.x-1.0 » 2.0.1
perfectcu.be’s picture

perfectcu.be commented
Issue summary: View changes
StatusFileSize
new bu.js_.txt1.28 KB
new bu-2.0.1.patch2.44 KB
perfectcu.be’s picture

perfectcu.be commented
mingsong’s picture

mingsong
Location 🇦🇺
commented

The reason is that

Drupal.behaviors will often be called multiple times on a page. For example, every time a form performs some Ajax operation, all Drupal behaviors will be executed again after page load, in order to attach any relevant JavaScript to the newly loaded elements. This can have the undesired affect of applying JavaScript to elements each time Drupal behaviors are executed, resulting in the same code being applied multiple times.

More explanation about Drupal JS behaviors see https://www.drupal.org/docs/7/api/javascript-api/managing-javascript#beh...

The solution is as simple as putting those codes into 

(function ($) {
  // All code here will only be called once the document is ready.
}(jQuery));

Mingsong opened merge request !2

mingsong’s picture

mingsong
Location 🇦🇺
commented

The patch for testing.

https://git.drupalcode.org/issue/bu-3203410/-/commit/09ccad3d6cda816930e...

mingsong’s picture

mingsong
Location 🇦🇺
commented
Status: Active » Needs review
pmkanse’s picture

pmkanse commented
StatusFileSize
new bu_3203410_2.1.1.patch2.47 KB

Patch for v 2.1.1