Javascript Error, Uncaught TypeError Property '$' of object [object Object] is not a function

Question

I'm trying to insert a script in a Joomla module. The script is a percentage loader in JS. I'm had some issues with another js but I finally managed to solve them.

The error i'm getting is:

Uncaught TypeError: Property '$' of object [object Object] is not a function (anonymous function)

I'm trying to import the Percentage Loader jQuery plugin

And the js code is:

$(function() {
  var $topLoader = $("#dttopLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUpdate : function(val) {
      $topLoader.setValue(Math.round(val * 100.0));
    }});

  var topLoaderRunning = false;
  $("#dtanimateButton").click(function() {
    if (topLoaderRunning) {
      return;
    }
    topLoaderRunning = true;
    $topLoader.setProgress(0);
    $topLoader.setValue('0kb');
    var kb = 0;
    var totalKb = 999;

    var animateFunc = function() {
      kb += 17;
      $topLoader.setProgress(kb / totalKb);
      $topLoader.setValue(kb.toString() + 'kb');

      if (kb < totalKb) {
        setTimeout(animateFunc, 25);
      } else {
        topLoaderRunning = false;
      }
    }

    setTimeout(animateFunc, 25);

  });
});      

I tried changing the first line from "$(function()..." to "jquery(function()..." as I read many topics on stackoverflow but still can't fix it.

Answer 1

There seems to be a similar issue in this SO post here but in WordPress.

You said you are using Joomla. Joomla might also include the jQuery library loaded "no conflict" mode and perhaps the same solution can be applied.

Try replacing this:

$(function() {

With this:

jQuery(document).ready(function ($) {