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

Created on 29 September 2023, 9 months ago
Updated 12 February 2024, 5 months ago

I installed the module on a fresh Drupal 10.1.4 version and I add the field format on a image field under Article content type. When check the content created, I get into console log the fallowing error:

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

After inspecting I see that the file triggering this error is "drupal.imagefieldzoom.js" having the fallowing code:

    $('.image-zoom-container img.original-image').each(function () {
        $(this).once('init').parent('.image-zoom').zoom({
          url: original_urls[$(this).attr('fid')],
          on: drupalSettings.imageFieldZoom.image_zoom_style,
          touch: drupalSettings.imageFieldZoom.image_touchscreen_compatible,
          magnify: drupalSettings.imageFieldZoom.image_magnify,
          duration: drupalSettings.imageFieldZoom.image_fade_duration
        });
      }

As far as I know due to this change record https://www.drupal.org/node/3158256 we need to remove jQuery dependency from the once feature in order to have this working.

Is there anyone working on this?
Thank you!

🐛 Bug report
Status

Needs review

Version

3.0

Component

Code

Created by

🇷🇴Romania ioana apetri

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ioana apetri
  • Status changed to Needs review 9 months ago
  • 🇮🇳India sarwan

    Hi @ioana apetri,
    I have fixed issue once function and also attached patch.
    Please review and verify.

  • Status changed to Needs work 9 months ago
  • 🇷🇴Romania ioana apetri

    Quick fix:

    My image is now zoomed in and out with the fallowing code in the "drupal.imagefieldzoom.js" file.

            $(once('init', this)). parent( '.image-zoom'). zoom({
                url: original_urls[$(this).attr('fid')],
                on: drupalSettings.imageFieldZoom.image_zoom_style,
                touch: drupalSettings.imageFieldZoom.image_touchscreen_compatible,
                magnify: drupalSettings.imageFieldZoom.image_magnify,
                duration: drupalSettings.imageFieldZoom.image_fade_duration
              });

    Also I modified the dependencies library to be the fallowing:
    - core/jquery
    - core/drupal
    - core/once
    - core/drupalSettings

  • 🇷🇴Romania ioana apetri

    I think also this part $(this).once('init') needs to be changed according the documentation.

  • Status changed to Needs review 9 months ago
  • 🇮🇳India sarwan

    This is a updated patch.

  • Status changed to Needs work 9 months ago
  • 🇷🇴Romania ioana apetri

    In case JQuery is used, than we need to replase $ sign with JQuery word.If you want to use $ sign you have to use this:
    (function ($, Drupal,once, drupalSettings) {

  • Status changed to Needs review 9 months ago
  • 🇮🇳India sarwan

    This is a new updated patch.

  • 🇦🇹Austria nofue

    Thanks for the patch #7, @sarwan_verma, works for me.

Production build 0.69.0 2024