Gaylord.P Gaylord.P - 7 months ago 110
Twig Question

Symfony and Jquery : $ is not defined

With Symfony, I create a form and form template for my collection :

{% block _training_versions_entry_dates_widget %}
...

<script type="text/javascript">
var datesCount = {{ form|length }};

$(function () {
$('#add-another-email').click(function(e) {
...
});
});
</script>
{% endblock %}


But I have this error : Uncaught ReferenceError: $ is not defined

I load Jquery in my
base.html.twig
:

<body>
{% block body %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="{{ asset('/js/app.js') }}"></script>
{% block javascripts %}{% endblock %}
</body>


I think because my theme is called before Jquery, but I don't want to move jquery in my
<head>
. Can you help me ?

Answer Source

Your js code must be called after jquery loading. So you can do something like this in your layout, add a block for the js code before the </body> tag:

layout.html.twig:

{% block javascripts_footer %}
    <script src="{{ asset('vendor/jquery/jquery.min.js') }}">            
{% endblock %}
    </body>
</html>

Then, in your template, write your js in the javascripts_footer block, not in the content one:

{% block javascripts_footer %}
    {{ parent() }}
    <script>
        $(document).ready(){
            var datesCount = {{ form|length }};           
            $(function () {
               $('#add-another-email').click(function(e) {
                   ...
                });
            });
        });
    </script>
{% endblock %}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download