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