Javascript variable not resolving, appears as a blank or null

[Cronnie]

I am currently working on a YUI Progress Bar for a profile page on a portal, and have run into trouble getting the bar to update after an AJAX call.

This is the initial code in the view.jsp which renders the progress bar on page load;

var pb = new YAHOO.widget.ProgressBar({value:<c:out value="${percentage}" />,minValue:0,maxValue:100}).render('divid');

When users edit a field on the page, there is an AJAX call to update the fields and also the percentage value of profile completion.

There is a function that is also run here, which should update the progress bar, but it isn't working.

function() {
          items = this.get('responseData');
          var percentage = items[0].value;
          document.getElementById('percent').innerHTML = percentage + '%';
          var element = document.getElementById("divid");
          element.innerHTML = "";
          renderProgressBar(percentage, "divid");
       }
 
function renderProgressBar(percentage, id){
alert(percentage);
 
var pb = new YAHOO.widget.ProgressBar({value:10, minValue:0, maxValue:100}).render(id);
pb.set('value', percentage);
 
}

The percentage value is being updated, as I'm updating the innerHTML of the 'percent' div, and it is correctly updating.

I also display an alert in the renderProgressBar to make sure the value is correct there also.

When it comes to updating the bar however, it just doesn't work, the value is always null or empty.

Any ideas?

I also tried to hardcode adding an entirely new progress bar after clearing the div tag, here is the output when the page is rendered;

YAHOO.widget.ProgressBar({value:, minValue:0, maxValue:100}).render('divid');

As you can see, the value is empty.