在joomla模块中使用带有php的var的js对象

Question

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 id="progress198" When I use this together with this it works perfectly:

<script>
(function ($) {
$(document).ready(function() {

var pID = "<?php echo 'progress' . $module->id ?>";
//alert(pID);
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

});
})(jQuery);
</script>

As you can see here var bar = new ProgressBar.Circle(progress198, { this 198 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 alert(pID); then it shows a alert with progress198.

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 pID inside var bar = new ProgressBar.Circle(INHERE, { on the place of INHERE.

Answer 1

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 two 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, {