Question

Can’t figure out these uncaught type errors? I am just trying to use a simple jQuery counter plugin… Other plugins on my site work fine :-/

Errors:

Uncaught TypeError: Cannot set property 'counter' of undefined
Uncaught TypeError: Object [object Object] has no method 'counter' 

On my page I have a span like this:

<span class="counter counter-analog2" data-direction="up" data-format="23:59:59.9" data-stop="00:00:10.0" data-interval="100">0:00.0</span>

I’ve included the jQuery plugin & css files ABOVE where I initialize them from:

<script type="text/javascript" src="/templates/ja_wall/js/jquery.counter.js"></script>
<link rel="stylesheet" href="/templates/ja_wall/css/jquery.counter-analog2.css" type="text/css" media="all" />

Then in my jQuery document ready (which is lower in the code than the plugin include) I initialize the counter plugin like so:

$('.main_counter').counter({}); 

I’m totally stuck… maybe its something to do with jQuery needing no-conflict mode? Any help would be greatly appreciated 🙂

Answer 1

Looks like there is another library which is overriding the $ variable.

The counter plugin implementation seems to be having some problem. In jQuery
plugin development it is common practise not to use the $ variable directly but use jQuery variable and use a self executing anonymous function to inject it.

In your case one solution can be to change the following line in the jquery.counter.js

!(function (context, definition) {
  if (typeof define == 'function' && typeof define.amd  == 'object') define(['jquery'], definition);
  else definition(context['$']);
}(this, function ($) {

to

!(function (context, definition) {
  if (typeof define == 'function' && typeof define.amd  == 'object') define(['jquery'], definition);
  else definition(jQuery);
}(this, function ($) {

You are using both jQuery and mootools both uses the $ variable to access the core engine. Since you have included the mootools library first and jQuery second, jQuery overrides the $ variable but any call to jQuery.noConflict() will reinstate the initial value.

In your case the k2.noConflict.js file is calling var $K2 = jQuery.noConflict(); which replaces the original value of $ which is mootools in your case.

Since you have called jQuery.noConflict() the $ variable will point to mootools, so if you want to access jQuery you need to use the variable jQuery or $K2.

The normal way of writing a plugin is as

(function($){
    $.fn.x=function(){
        ..... 
    };
})(jQuery);