purple11111 purple11111 - 1 month ago 4
PHP Question

js object using a var with php in joomla module

I am creating a Joomla module that shows a progressbar from the ProgressBar.js plugin. As it is a module it needs to be setup so that it can load multiple objects on one page and therefore I can't hardcode the ID of the objects. So I use PHP to create the HTML objects with each there own ID.

<div id="progress<?php echo $module->id ?>"></div>

In this case it shows

When I use this together with this it works perfectly:

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

var pID = "<?php echo 'progress' . $module->id ?>";
var bar = new ProgressBar.Circle(progress198, {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
bar.animate(0.8); // Number from 0.0 to 1.0


As you can see here
var bar = new ProgressBar.Circle(progress198, {
is now hardcoded into it. Which is not the way it needs to be.

When I try this:
var bar = new ProgressBar.Circle(pID, {
then nothing happens and when looking into the inspector it shows up exactly like that.

But when I decomment
then it shows a alert with

So I am doing something wrong but can't figure out what I do wrong. Thanks in advance for helping.

To clarify the question

How should I put
var bar = new ProgressBar.Circle(INHERE, {
on the place of


As stated in the documentation the first parameter in new ProgressBar.Circle(container[, options]) has to be a DOM element or a CSS selector.

Your browser seems to allow you to access elements by their id, otherwise

var bar = new ProgressBar.Circle(progress198, {

would throw a ReferenceError: progress198 is not defined

To fix your script you have to options:

1) Get the element first with document.getElementById()

var bar = new ProgressBar.Circle(document.getElementById(pID), {

2) make pID a valid id selector adding a #

var bar = new ProgressBar.Circle("#" + pID, {