CODEWITHSUNDEEP
javascriptsymfony
Florian Lucke
Florian Lucke

Reputation: 109

Uncaught ReferenceError: Chart is not defined OR how to include javascript in Twig

In my Symfony project I try to make use of Chartjs.org's javascript.

I put the chart.js file right there where all other javascript files are located and in javascript.html I include the file so that it is available across the project.

<script src="assets/js/chart.js"></script>

In my twig template I try to instantiate Chart like this:

<canvas id="myChart" width="400" height="400"></canvas>

<script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx);
</script>

This throws an error: Uncaught ReferenceError: Chart is not defined

What am I missing?

The answer: 

{% javascripts '@AcmeFooBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

More details: http://symfony.com/doc/2.1/cookbook/assetic/asset_management.html

Upvotes: 0

Views: 3241

Answers (1)

HMR
HMR

Reputation: 39270

As to the question where to put your scripts, maybe this will work:

<script src="{{ asset('js/propuestas_public.js') }}" type="text/javascript"></script>

http://symfony.com/doc/2.0/book/templating.html#linking-to-assets

The asset function's main purpose is to make your application more portable. If your application lives at the root of your host (e.g. http://example.com), then the rendered paths should be /images/logo.png. But if your application lives in a subdirectory (e.g. http://example.com/my_app), each asset path should render with the subdirectory (e.g. /my_app/images/logo.png). The asset function takes care of this by determining how your application is being used and generating the correct paths accordingly.

Additionally, if you use the asset function, Symfony can automatically append a query string to your asset, in order to guarantee that updated static assets won't be cached when deployed. For example, /images/logo.png might look like /images/logo.png?v2. For more information, see the assets_version configuration option.

Upvotes: 1

Related Questions