0

Estoy tratando de cargar un plugin en mi web pero no me lo esta cargando correctamente Me esta tirando algunos errores y warnings que no se bien como solucionarlo

Alguien tiene alguna idea de que se trata? Algun consejo para solucionarlo?

Dejo una captura dela consola con los warnings El plugin es jquery-circle-progressintroducir la descripción de la imagen aquí

<td class="light">
   <div class="circulito" data-value="<?= round($porc['porc'],1) ?>" >
                                                    
   </div>
 </td>

<script src="/webroot/plugins/circle/dist/circle-progress.js" type="text/javascript"></script>
<script type="text/javascript">

    $('.circulito').circleProgress({
        size: 50,
        startAngle: 11,
        lineCap: 'round',
        fill: {
            color: "#44aaf2"
        }
    }).on('circle-animation-progress', function (event, progress, stepValue) {
        $(this).find('strong').text(stepValue.toFixed(2));
        // $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    });

    

</script>
1
  • 1
    Hola! Seria bueno que pusieras el código con el que llamas el plugin.
    – Legna
    Commented el 3 sept. 2019 a las 13:40

1 respuesta 1

1

Aparentemente no cargabas bien la librería: Sea por que no encuentra el archivo o no tenga permisos el servidor web envía un error en forma de página html, si no incluye las cabeceras de error el navegador carga ese html como si fuera el script ( de ahí que el warning sea que no coincide el tipo mime ). Como no puedo acceder a tu sistema de directorios he cargado la librería a través de un CDN. También te faltaba añadirle un value: al objeto para que se lance el renderizado.

En el ejemplo que nos pones no cargabas tampoco la librería Jquery pero supongo que en tu proyecto si que lo hacías. Al fallar la carga del script del plugin, circleProgress ya no es una función.

Aquí puedes ver el código funcionando:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.js"></script>


<div class="circulito" data-value="5"></div>


<script type="text/javascript">

    $('.circulito').circleProgress({
        size: 50,
        value: 0.75,
        startAngle: 11,
        lineCap: 'round',
        fill: {
            color: "#44aaf2"
        }
    }).on('circle-animation-progress', function (event, progress, stepValue) {
        $(this).find('strong').text(stepValue.toFixed(2));
        // $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    });
    

</script>

Anotación: He quitado el PHP de tu código para poder hacer que se reproduzca aquí.

Referencia: Documentación del plugin

1
  • Perfecto!! Me funciono gracias!! Commented el 3 sept. 2019 a las 14:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.