Problem/Motivation

Using slick with Drupal 11.2/Jquery4 and random slide order leads to Javascript-Error, preventing any slides to show up.
The Javascript-Error is:

drupal.js?v=11.2.3:64 Uncaught TypeError: a.children(...).sort is not a function
    at i (slick.load.min.js?v=11.2.3:1:1690)

Steps to reproduce

Old, working installation:
- drupal: 10.5.2
- drupal/slick: 3.0.4
- npm-asset/slick-carousel: 1.6.0

- Slick-Configuration with option 'randomize' set to true
- A content-type with an image-field (unlimited number of values), displayed with 'Slick Image'. Formatter Options: 'Skin main' = 'Full Screen' and 'Optionset Main set to the configuration above. Everything else per default

=> Everything works fine. Slider is shown as expected, order of the images is random.

Breaking Installation:
- drupal: Upgrade to 11.2.3
- drupal/slick: still 3.0.4
- npm-asset/slick-carousel: still 1.6.0, patched according to https://www.drupal.org/project/slick/issues/3467129

=> On Pages where the image field is empty: Everything ok, browser reports no error.
=> On Pages where the image field has one image: Everything ok, image is shown, browser reports no error.
=> On Pages where the image field has multiple images: No image is shown, chrome reports in the Javascript-Console:

Uncaught TypeError: a.children(...).sort is not a function
    at i (slick.load.min.js?v=11.2.3:1:1690)
    at L.init.hn (dblazy.min.js?t1wily:1:3262)
    at L.init.once (blazy.once.min.js?t1wily:1:243)
    at Object.attach (slick.load.min.js?v=11.2.3:1:3408)
    at drupal.js?v=11.2.3:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=11.2.3:162:34)
    at drupal.init.js?v=11.2.3:32:12
    at HTMLDocument.listener (drupal.init.js?v=11.2.3:20:7)

This makes sense, as sort was removed with jquery4:
https://github.com/jquery/jquery-migrate/issues/473

Proposed resolution

The problem lies in slick.load.js:199ff

    function randomize() {
      t.children().sort(function () {
        return 0.5 - Math.random();
      })
        .each(function () {
          t.append(this);
        });
    }

It should work out with the following code (untested)

var children = t.children().get().sort(function() {
  return 0.5 - Math.random();
});
t.append(children);

Or in the minified code, replace:

a.children().sort(function(){return.5-Math.random()}).each(function(){a.append(this)}),f

with

a.append(a.children().get().sort(function(){return.5-Math.random()}))

(tested, works in my installation)

Issue fork slick-3544178

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:

Comments

mullzk created an issue. See original summary.

gausarts’s picture

Category: Bug report » Task
Status: Active » Needs work
Parent issue: » #3467129: Incompatibility with Drupal 11/jQuery 4

Thank you for quality post.

Patches are welcome. Feel free to use online JS compressor, normally better and more compact than editor compressors.

sourabhsisodia_’s picture

Assigned: Unassigned » sourabhsisodia_

sourabhsisodia_’s picture

Assigned: sourabhsisodia_ » Unassigned
Status: Needs work » Needs review
gausarts’s picture

@mullzk, does the patch work?

Thanks.

mullzk’s picture

@sourabhsisodia_ , @gausarts

Thank you both for your fast reaction and sorry for my late reply.
The patch works and fixes my issue. Thank you very much.

gausarts’s picture

No worries :)

However I couldn't find the Merge button which was normally there.

I seem to lose the Push access, even after clicking the Get access button and a reload.

Might be the latest Drupal thread glitch.

I'll come back sometime later, hopefully the Merge button appears again.

gausarts’s picture

Status: Needs review » Reviewed & tested by the community

Let's see if RTBC make the button appear. If not, I'll need to search for DO issues with this UI change.

sourabhsisodia_’s picture

Thanks @gausarts for the RTBC, was merge button problem resolved ?

gausarts’s picture

Still no Merge button.

BTW, does the patch still work for D10?

sourabhsisodia_’s picture

yess patch works fine for both drupal 10 and 11

gausarts’s picture

Looks like thread UI is still changing. The Merge button was there, then gone, then replaced by a link leading to a page, yet with no Merge button.

There must be docs for this new UI workflows, but can't find it yet.

Still looking for the correct keywords to search for this type of UI changes. No joy.

If you find the relevant instructions to merge, please share.

If UI is still mysterious, I might need to use CI later whenever I get a chance.

Just an FYI.

  • gausarts committed 16262421 on 3.0.x
    Issue #3544178 by mullzk, sourabhsisodia_: Drupal11/jquery4 breaks slick...
gausarts’s picture

Status: Reviewed & tested by the community » Fixed

Thank you all for contribution.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.