CakePHP & jQuery UI Progressbar implementation issues

I love cakePHP and jQuery, never a problem with any of them. ANyway I am still a noob. Now I try to implement the progressbar and I am a bit stuck, obviously something super simple is missing out.

As shown on the jQuery site, I implemented the code:

               <script>
                    $(function() {
                        $( "#progressbar" ).progressbar({
                            value: 37
                        });
                    });
                    </script>

                <div class="demo">
                <div id="progressbar"></div>
  开发者_JAVA百科              </div><!-- End demo -->

1. Nothing is showing up in my view, not even a default bar or something. I use 2 other UI widgets so the library links work. What do I miss?
2. How can I set the value dyamically? I have a php value $value ready in my view.
3. Can I create multiple progressbars in my view?

Many thanks!

1. It looks like you may have custom packaged jquery-ui that had progressbar plugin deselected when package was prepared. Make sure you have it, or re-download full jquery-ui with certain theme from jquery ui website.

2. That would be:

               $(function() {
                   $( "#progressbar" ).progressbar({
                       value: <?php echo $value; ?>
                   });
               });
   

Add multiple empty div placeholders for each progressbar you need and assign jquery ui progressbar for each of them if they need different values initially, or check this sample code if all sidebars need initial value as 0:

<script type="text/javascript">
$(function(){
    $(".progressbar").progressbar({value:0});
});
</script>

<div id="pb1" class="progressbar"></div>
<div id="pb2" class="progressbar"></div>
<div id="pb3" class="progressbar"></div>
<div id="pb4" class="progressbar"></div>

idea is to use the same class name (but different id for sake of later progressbar value changes) to create all sidebars at once without duplicating the code