Question

I am using the YUI Progress Bar but I’m having some problems with it.

Normally to change the value of the progress bar, one would use:
progressBar.set('value', 10000);
Where value is the thing I am trying to change and 10000 is what I want to change it to. In the console, this returns true

That works fine. But I want to pass a variable as the value:
progressBar.set('value', total);
But this is not working for me and the console reports false

Here is the code:

This creates and renders the bar:

var progressBar = new YAHOO.widget.ProgressBar({
                direction: "ttd",
                height: "75px",
                width: "750px",
                anim: true,
                minValue: 0,
                maxValue: 85000,
                value: 35000
            }).render("bar");

            var anim = progressBar.get('anim');
            anim.duration = 3;
            anim.method = YAHOO.util.Easing.bounceBoth;

And this is an ajax request to get the value that I would like to set the bar to:

var itemTotal, mITotal, donationTotal, total;

            function showHint()
            {
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                var myString = new String(xmlhttp.responseText); 
                var myArray = myString.split(',');
                itemTotal = myArray[0];
                mITotal = myArray[1];
                donationTotal = myArray[2];
                total = myArray[3];

                progressBar.set('value', total);
                alert(total);
                }
              }
            xmlhttp.open("GET","goal_ajax.php",true);
            xmlhttp.send();
            }

Any ideas?

Answer 1

This:

                var myArray = myString.split(',');
                ...
                total = myArray[3];

doesn’t set total to 10000 (a number), but to '10000' (a string). I’m betting that if you were to try

                progressBar.set('value', '10000');

you’d see the same problem. To fix this, change this:

                total = myArray[3];

to this:

                total = +myArray[3];

which will convert the '10000' into 10000.

(Disclaimer: not tested. This is just a guess, but as guesses go, I’m pretty confident of it.)