Question
I am currently using a bootstrap template that uses a few JS files. To get them to load I placed all the required JS files in the app/Resources/views/base.html.twig file. Here is a snippet of the code:
https://stackoverflow.com/questions/21256120
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian{% block body %}{% endblock %}
{% block javascripts %}
{% javascripts '@ABBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
My code in the child twig file located in AB/ABBundle/Resources/views/Home/show.html.twig has the following code:
{% extends '::base.html.twig' %}
{% block body %}
blah blah blah normal html code blah blah blah
{% endblock %}
The problem is that when I view this page I get several errors such as "ReferenceError: jQuery is not defined" and "ReferenceError: $ is not defined". This is even though the JS files are included (the names of the JS file are changed as expected).
I found out that the error can be fixed with a rather nasty hack by instead of loading all js files with a single line of code {% javascripts '@ABBundle/Resources/public/js/*' %} I know need to include the js files like this:
{% block javascripts %}
{% javascripts '@ABBundle/Resources/public/js/jquery.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% javascripts '@ABBundle/Resources/public/js/jquery.prettyPhoto.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Is there a way I can force Assetic to load certain JS files first while still using the much shorter: {% javascripts '@ABBundle/Resources/public/js/*' %} option?
Solution
You can specify order which files are loaded using different folder structure like this:
{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js'
'@AcmeFooBundle/Resources/public/js/file2.js'
'@AcmeFooBundle/Resources/public/js/folder/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
OTHER TIPS
I do it by naming my .js files in the order I want. Like this:
10_foo.js
20_bar.js
30_baz.js
then I don't need to specify them one by one, I just do as normal:
{% javascripts '@MyBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
and they are loaded in order.
Now for the main libraries that should be available in every page, I use a base.html.twig template in the app/Resources/view that gets extended in every page with this code in it:
before <body> tag:
{% stylesheets '@MyMainBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% block stylesheets %}{% endblock %}
and near the end of <body> tag:
{% javascripts '@MyMainBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}{% endblock %}
so I leave the main js libraries (with the naming convention I mentioned above) in the "MainBundle" and also configured in the base template. This way they are loaded in every page and I have the possibility of extending CSS and javascript files with some files specific to that page like this:
{% extends '::base.html.twig' %}
{% block stylesheets %}
{% stylesheets '@MySpecificBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% block body %}
... < whatever > ...
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% javascripts '@MySpecificBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
It is an old question, but i was wondering too how to achieve that, and based on @TroodoN-Mike solution I realized that this will do the trick :
{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js'
'@AcmeFooBundle/Resources/public/js/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
