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

Question

I am trying to insert a script into a Joomla module. The script is a percentage loader in JS. I had some problems with other js, but I was finally able to solve them.

The error I get is:

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

I am trying to import jQuery Percent Loader Plugin

And js code:

$(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 () ..." since I read a lot of topics on stackoverflow, but still can't fix it.

Answer 1

It seems that this post is SO here , but in WordPress.

You said you were using Joomla. Joomla may also include a jQuery library loaded without conflict, and you might be able to apply the same solution.

Try replacing this:

 $(function() { 

Wherein:

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