Uncaught ReferenceError: $ is not defined in twig template with jQuery import

Question

I have this code in my twig view:

{% extends "MyBundleBundle::layout.html.twig" %}
{% block content %}
    <div class="page-header">
        <h4>add an equipement</h4>
    </div
    <select id="selectEquipement">
          <option selected disabled>choose an equipement</option>
          <option value="{{ path('addEquipement1') }}">Equipement 1</option>
          <option value="{{ path('addEquipement2') }}">Equipement 2</option>
    </select>

    <div id="formEquipement"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#selectEquipement').change(function() {
                var url = $(this).val();
                $.get(url , {} , function(formulaire)  {
                    $("#formEquipement").html(formulaire);
                    })
                })
        });
    </script>
{% endblock %}

When i load the page content of this view I have this error on the first line of my script $(document).ready(function() { :

Uncaught ReferenceError: $ is not defined in twig template

I understand that jQuery is not load . When I add <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> this tag on this view, all works well, I have no error.

But, in fact I already import in my application (local) the jquery script I need. So In my main layout I have imported the script like this:

{% block script %}
                {% javascripts

                                '@MySpaceMyBundle/Resources/public/js/jquery-2.1.1.min.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery-ui.min.js'
                                '@MySpaceMyBundle/Resources/public/js/bootstrap.min.js'
                                '@MySpaceMyBundle/Resources/public/js/applydataTables.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery.form.min.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery.dataTables.min.js'
                                '@MySpaceMyBundle/Resources/public/js/dataTables.colVis.min.js'
                                '@MySpaceMyBundle/Resources/public/js/jquery.sumoselect.min.js'
                                '@MySpaceMyBundle/Resources/public/js/main.js'
                                'http://cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js'%}
                                <script type="text/javascript" src="{{ asset_url }}"></script>
                {% endjavascripts %}
            {% endblock %}

Someone know why? I noticed that I have some errors like these since I upgrade my symfony application to the 2.6 version.

Moreover, when I use Ajax call in my application, in the symfony toolbar , the notification for Ajax request does not work like before (no notifications), but when I debug in the network tab of my browser all works well.

Answer 1

Try replacing:

$(document).ready(function() {

with

$(window).load(function() {

window.onload() fires later than document.ready() when all elements, including the dynamically generated ones (or included) have been loaded.

EDIT: Can you try moving your code after the jQuery code, in the footer?

The right way to do it would be to have a separate .js file and call it in the footer, right after jQuery.