5

Unsure why $(...).counterUp is not a function.

  • Waypoints is enqueued after Counter-up.
  • WP core JQuery is loaded before both of them.

View source ordering:

<script type='text/javascript' src='http://testsite.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js?ver=5.2.3'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js?ver=5.2.3'></script>

How I'm enqueuing Waypoints and CounterUp:

wp_enqueue_script( 'counterup', 'https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js', array(), false, false);
wp_enqueue_script( 'waypoints', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js', array(), false, false);

JS being used:

jQuery(document).ready(function($) {
    $('.counter').counterUp({
        delay: 10,
        time: 1000
    });
});

What am I missing here?

Edit:

Screenshots of where files are loaded:

enter image description here enter image description here

Have also tried pulling counterup via node_modules:

wp_enqueue_script( 'counterup', plugin_dir_url( __FILE__ ) . 'node_modules/counterup/jquery.counterup.min.js' );

... Still get the same error message.

Freddy
  • 683
  • 4
  • 35
  • 114
  • 1
    Check for any other inclusions of jQuery. Eg, you may have another ` – Phil Oct 01 '19 at 07:39
  • Hi @Phil - The WordPress core JQuery is the only inclusion of JQuery that is on the page (and site) – Freddy Oct 01 '19 at 07:43
  • when you initialize the Counter code before loading jquery.counterup.min.js? – Vel Oct 01 '19 at 08:12
  • @Vel - The counter code compiles into `theme.min.js` and `theme.min.js` is loaded right before the closing `body` tag. So yes, JQuery is loaded before `counterUp` is called. – Freddy Oct 01 '19 at 08:25
  • can you share the screenshot? – Vel Oct 01 '19 at 08:29
  • @Vel - Sure, you want a screenshot of where the files are loaded in from view source? – Freddy Oct 01 '19 at 08:31
  • Yes. that screenshot. – Vel Oct 01 '19 at 08:31
  • @Vel - Updated question with screenshot :) – Freddy Oct 01 '19 at 08:39
  • Please download and use counterup.js from your local server – Vel Oct 01 '19 at 08:53
  • @Vel - As in via `node_modules`? Because I have tried that way too, see updated question – Freddy Oct 01 '19 at 09:07
  • Why you are using node module?. node module not require. simple download and include the your theme folder. – Vel Oct 01 '19 at 09:09
  • Make sure you do an exhaustive search for any other jQuery inclusions. Check every ` – Phil Oct 02 '19 at 02:00
  • Cannot reproduce this with the information given ~ https://jsfiddle.net/06akedqs/. I definitely think this is a duplicate jQuery problem as demonstrated here ~ https://jsfiddle.net/06akedqs/1/ – Phil Oct 02 '19 at 02:05

1 Answers1

1

  1. Download jquery.counterup.min.js and include in your active theme folder/js.

  2. Add below the script in functions.php file.

    function counterup_scripts() 
{
     wp_enqueue_script('counterup', get_stylesheet_directory_uri() . '/js/jquery.counterup.min.js', array(), false, false);

}
add_action('wp_enqueue_scripts', 'counterup_scripts');
Vel
  • 9,027
  • 6
  • 34
  • 66
  • I have just tried that (and also deregisted WordPress core JQuery and registered the JQuery 3.4.1) but still getting the `counterUp is not a function` error? – Freddy Oct 01 '19 at 17:59
  • Did you download the counterup.js to local server? – Vel Oct 02 '19 at 02:30