jqueryui progress bar

[pippopippo2]

Hi, i want change the Data sheet of products in a progress bar with jquery ui.

 

i changed this code in product.tpl

<ul id="idTab2" class="bullet">
     {foreach from=$features item=feature}
            {if isset($feature.value)}
			    <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
            {/if}
     {/foreach}
</ul>

in this:

<div id="idTab2" class="bullet">                   
      {foreach from=$features item=feature}
            {if isset($feature.value)}
                <div id="progressbar" class="{$feature.name|escape:'htmlall':'UTF-8'}">{$feature.name|escape:'htmlall':'UTF-8'}</div> 
                    <script>
                        alert("messaggio");
                        $(function() {                     
                            $(".{$feature.name|escape:'htmlall':'UTF-8'}").progressbar({
                                value: {$feature.value|escape:'htmlall':'UTF-8'}0
                            });
                        });
                    </script>
                                <!-- <span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'} -->
            {/if}
		{/foreach}
		</div>

the alert works but not javascript, in the console i have this error

 

1. Uncaught TypeError: Object [object Object] has no method 'progressbar'
   1. (anonymous function)
   2. o
   3. p.fireWith
   4. e.extend.ready
   5. c.addEventListener.B

 

I tried to solve by adding this code in headers.tpl

<script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script>

but not working.
Can help me?

[CartExpert.net]

Hi.

 

You should post the link to your site.

 

Regards.

Robin.

The CartExpert Team

[pippopippo2]

Hi.

 

You should post the link to your site.

 

Regards.

 

Robin.

 

The CartExpert Team

Sorry but i have a project in local

 

This is a code in frontend:

<div id="idTab2" class="bullet">                   
	<div id="progressbar" class="Larghezza">Larghezza</div> 
                    <script>
                        alert("messaggio");
                        $(function() {                     
                            $(".Larghezza").progressbar({
                                value: 50
                            });
                        });
                    </script>
                    <!-- <span>Larghezza</span> 5 -->
</div>

Edited March 3, 2014 by pippopippo2 (see edit history)

[CartExpert.net]

You should call the function when the document is ready.

$(document).ready( function()
{
 $(".Larghezza").progressbar({
                                value: 50
                            });
})

[pippopippo2]

 

You should call the function when the document is ready.

$(document).ready( function()
{
 $(".Larghezza").progressbar({
                                value: 50
                            });
})

 

I tried but not work

[CartExpert.net]

The <script></script> part should be between {literal}{/literal}

 

Are you sure the progressbar script is loaded?

 

Regards.

Robin.

The CartExpert Team

[pippopippo2]

The <script></script> part should be between {literal}{/literal}

 

Are you sure the progressbar script is loaded?

 

Regards.

 

Robin.

 

The CartExpert Team

 

I try but not work, I'm not sure the script is loaded but if I insert alert("messaggio"); it work

[CartExpert.net]

No, this script: /js/jquery/ui/jquery.ui.progressbar.min.js

 

Regards.

Robin.

The CartExpert Team

[pippopippo2]

No, this script: /js/jquery/ui/jquery.ui.progressbar.min.js

 

Regards.

 

Robin.

 

The CartExpert Team

 

initially the script was not included ( at least I think ) and i add this: 

<script type="text/javascript" src="http://www.prova.it/js/jquery/ui/jquery.ui.progressbar.min.js "></script> 

in header.tpl and I replaced the file code with that of jqueryui.min

[pippopippo2]

I put the site online test this, view the data sheet i want it this 

Edited March 5, 2014 by pippopippo2 (see edit history)