jQuery being loaded twice

Loops & Logic
1

Hi, I was testing the beta but it broke my jQuery and Slick scripts which are loaded via an L&L template in the Document Foot position. Otherwise, I did not see any issues.

image
image1552×1420 451 KB

2

Hi @Rips - Thanks for trying the beta version and reporting the issue.

I checked the way Document Foot is loaded, and as far as I can tell, nothing has changed there. But from your description and screenshot, it seems the loading order must have changed between:

  • where the jQuery Slick library is loaded
    (I’m guessing it’s a script tag in Document Foot)
  • and where it’s being called.
    Are the calls to $().slick inside a template’s Script field? Or from a Script template type?

I tried some variations, and any script loaded in Document Foot always comes last, after any scripts within templates or the Script template type. This should be the same behavior as before.

Could you confirm that the Slick script is being loaded at all? (From browser developer console, under Network tab.)

If it’s being loaded, then it seems $().slick is being called too early before the script has finished loading. In that case, you may need to wrap the calls with $(document).ready() (reference).

$( document ).ready(function() {
  // Slick library is loaded
  $( some_selector ).slick()
})

Could you try that and see if it works?

If not, are there any other details that could help me reproduce the issue on my side?

And even if that works, I wonder what changed between the previous version of L&L and the new beta to cause the issue in the first place.

3

Hi @eliot, I have checked a few things and here are the answers:

  • All scripts are loading in the Network tab
  • Slick scripts are already wrapped with $( document ).ready(function() {
  • Scripts have been set up as per the dev instructions E.g. GitHub - kenwheeler/slick: the last carousel you'll ever need
  • I usually call my scripts from the Scripts tab of a Template so I can tweak settings per module
  • It seems that all Slick and jQuery calls are failing after enabling the beta plugin

I manage my custom tags using Templates in the Document Head and Foot locations and can provide temporary admin access if needed.

I have left the beta plugin enabled on this site, which might help you debug:

Cheers.

4

Thank you for the detailed info, that’s very helpful.

There are two different versions of jQuery being loaded on the site. I bet the Slick library registers itself with one instance, while the scripts are seeing the other instance of jQuery.

  • WordPress core: /wp-includes/js/jquery/jquery.min.js?ver=3.7.1
  • The Simiplicity theme is loading: /wp-content/themes/simplicity/header/vendor/js/jquery-3.6.0.min.js

I wonder what is causing this, and if/how it’s related to the plugin update.

5

(I moved this thread to its own post.)

6

Thanks. I tried to check for duplicate jQuery instances but did not realise Slick was loading it as a dependency. The slide-out menu uses v3.6.0, and Slick uses v3.7.1.

The quick fix for this was to remove the Template tag for jQuery v3.6.0, as both features can use 3.7.1.

However, when I disabled the beta plugin the same jQuery issue returned:

image
image1497×592 85.1 KB

So, this is pretty strange, but it seems the beta plugin is changing something in relation to how scripts are loaded. I will follow up with a DM and some additional info.