jquery : progress bar show in html

Question

my progress bar is working perfect when i write value into my html but it it dont work when i pass value from jquery .. e.g $('#progresslevel').html(data);

right now i have this html in which if i insert value into my progress bar it works

   <span class="demo-progress" data-progress-options='{"size":false,"style":"large","barClasses":["green-gradient","glossy"],"innerMarks":25,"stripes":true,"darkStripes":false}'>50%</span>

but if i do this in jquery

here i am getting a value from controller

  $('.demo-progress').html(data);

it didnt work .. only 50 is written on box and nothing else .. progress bar dont appear

i tried this also by giving a div after span class and then pass value to the div but still it didnt work

anyone know how to fix this issue

Answer 1

You should not be directly modifying the progress bar's component elements yourself. The Progressbar widget has an API that you can use to modify the progress -- specifically, you are supposed to set the value option:

$(".demo-progress").progressbar("option", "value", 50);