jQuery plugin is undefined although is properly included before my js code

Question

I am working on this quite strange issue for several days now, and I really don't understand why that happens.

Basically, the environment is WordPress and I am including two js files:

vendor.js -> generated by gulp and all it does is concatenating bower libs together

myScript.js -> my code

What I know (with proof):

The vendor file is included before my code (checked from the console)
The plugin I am using is included in vendor.js (opened the file in a new tab in chrome)
Both files are loaded correctly (i printed some debug console log and they are in the console)

BUT even if everything looks fine to me, the plugin is still undefined for whatever reason. The plugin I am using is this one: https://github.com/idiot/unslider

and the error i'm getting in the console is this:

Uncaught ReferenceError: unslider is not defined

This is the part of my code where I call and need this plugin:

jQuery(document).ready(function($) {
  console.log("unslider is ", unslider);
  $('#topBannerSlider').unslider({
    autoplay: true,
    delay: 10000,
    keys: true,
    nav: true,
    arrows: {
      prev: '<a class="unslider-arrow prev fa fa-arrow-circle-left"></a>',
      next: '<a class="unslider-arrow next fa fa-arrow-circle-right"></a>'
    }
  });

  $('#homePageTestimonialsCarousel').unslider({
    autoplay: true,
    delay: 20000,
    keys: true,
    nav: true,
    arrows: false
  });
}

and it does the same if I try to load it before jQuery(document).ready() event, like so:

console.log("unslider is ", unslider);
jQuery(document).ready(function($) {
  $('#topBannerSlider').unslider({
    autoplay: true,
    delay: 10000,
    keys: true,
    nav: true,
    arrows: {
      prev: '<a class="unslider-arrow prev fa fa-arrow-circle-left"></a>',
      next: '<a class="unslider-arrow next fa fa-arrow-circle-right"></a>'
    }
  });

  $('#homePageTestimonialsCarousel').unslider({
    autoplay: true,
    delay: 20000,
    keys: true,
    nav: true,
    arrows: false
  });
}

Do you have any suggestion? what else can I try? what else can it be? I am really stuck and any help would be really appreciated. Thanks a lot

check the order those scripts are being loaded, first include jQuery, then unslider, then your js code. — Daniel Manta
– Daniel Manta, Commented Oct 15, 2017 at 9:55
Hi, I checked it, everything is in the proper order..that's why it's really strange to me — Nick
– Nick, Commented Oct 15, 2017 at 9:56
in the code samples they load unslider.js after html is defined, are you doing the same? — Daniel Manta
– Daniel Manta, Commented Oct 15, 2017 at 9:58
Do you have the async or defer attribute set on the <script> tag which is loading the library? Please also check the console for errors, as there should be some clue as to why your code isn't working — Rory McCrossan
– Rory McCrossan, Commented Oct 15, 2017 at 9:58
I have copied your code and it's working fine. The only thing was you had a ) missing at the end of your code. Not sure if this is unrelated issue — Daniel Manta
– Daniel Manta, Commented Oct 15, 2017 at 10:23

Tarek.Eladly · Accepted Answer · 2017-10-15 10:00:29Z

3

If I get this right you say WordPress, so try

jQuery insted of $

I have this problem before and this fix it.

WordPress, PHP, JQuery and $ don't mix ;).

answered Oct 15, 2017 at 10:00

Tarek.Eladly

75913 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Over a year ago

I don't believe it, but this actually solved the issue! Really strange, but hey, thanks man you saved my weekend :)

Tarek.Eladly Over a year ago

anytime dude ;)

Collectives™ on Stack Overflow

jQuery plugin is undefined although is properly included before my js code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related