3

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>

enter image description here

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

j08691
  • 204,283
  • 31
  • 260
  • 272
hellosheikh
  • 2,929
  • 8
  • 49
  • 115

1 Answers1

4

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);
Jon
  • 428,835
  • 81
  • 738
  • 806
  • thankyou ... i did this but it didnt workout $(document ).ready(function(){ $.getJSON('http://localhost/userinfo/battery_level/', function(data){ $(".demo-progress").progressbar("option", "value", data); }); }); – hellosheikh Aug 16 '13 at 19:58
  • @hellosheikh The answer given by Jon is exactly what yo need. You can also see the bin here, which validates his answer : http://jsbin.com/ujopul/1/edit . Remember to `run with js` . Secondtly are u sure , what you are using is a jquery-smooth progress bar, looks to me it might be something else. Also, why are you appending `data` to it. In case, you want to pass a value, then don't you need to retrieve the value using `data.value` or something ... – The Dark Knight Aug 16 '13 at 20:07
  • thankyu thankyou ... i got it... it works now ... thankyou very much – hellosheikh Aug 16 '13 at 20:07
  • i dont know exactly i am using but i worked it by doing this $(".demo-progress").progress(50); – hellosheikh Aug 16 '13 at 20:09