purple11111 purple11111 - 2 months ago 6
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
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

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