progressbar not working

[blsr]

I have the progressbar in a dynamic list. I tried to place the script in many places and it never worked. What am I missing? Is there anyything like ...we need to place the below script in a specific place or declaring the variables upfront? $(document).ready(function() { $('.progress .progress-bar').progressbar({display_text: 'center'}); });

[minddust]

hi @blsr

hard to say with no code but pls be sure you match this:

1. bootstrap-progressbar.js must be loaded before calling .progressbar()
2. progressbar (html) must be available before calling .progressbar()

i guess your problem is caused by point 2. and your html code isn't there when you are calling the script.

this isn't a progressbar issue but a generell structuring one. so i'm closing the issue.

good luck implementing :)

[blsr]

Here is an example:

http://plnkr.co/edit/ZopDVAE06Eb7eD6a0e1M?p=preview

[minddust]

$("."+$scope.testArrayList[i].name+" "+".progress-bar").attr("data-transitiongoal", 20).progressbar();

your jquery selector isn't valid - there aren't any .John .progress-bar etc classes.

change this for testing to:

$(".progress-bar").attr("data-transitiongoal", 20).progressbar();

to see that it works

[blsr]

Sorry my bad ...I created the wrong plunker http://plnkr.co/edit/ZopDVAE06Eb7eD6a0e1M?p=preview Please check the updated one. If I update my list its not working.

[minddust]

it's problem number 2. angular isn't done with rendering and you are calling progressbar()

triggering pb explicitly does the (ugly) trick.

<button ng-click="pb()">activate progressbar</button> 

$scope.pb = function() {
  $(".progress-bar").progressbar();
}

i'm not that much into angular but you have to look for a way to trigger the method after the rendering is done. just try some googling ;) e.g.

http://stackoverflow.com/questions/16935766/run-jquery-code-after-angularjs-completes-rendering-html

[blsr]

Thank You... will look for a workaround