¿Cómo cargar jQuery con Assetic desde la plantilla de diseño antes de las etiquetas de JavaScript en la plantilla secundaria?

Como podemos leer en Documentación de Symfony2, JavaScript files have to be declared at the bottom of body tag.

However, if I declare jQuery library in layout template and if I want to use jQuery in child template I have this error :

$ no está definido

It seems jQuery is loaded after my script tag. When I put an alert message at the top of jQuery file, alert is displayed.

Any idea to load jQuery before ?

Find below my base, layout and child templates.

app/Resources/views/layout.html.twig:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        {% block stylesheets %}
                {# ... #}
        {% endblock %}
    </head>

    <body>            
        <div id="container">
            {# ... #}
        </div>

        {% block javascripts %}
        {% endblock %}
    </body>
</html>

src/MyBundle/resources/views/layout.html.twig:

{% extends "::layout.html.twig" %}

{% block main %}
    {% block mybundle_body %}
    {% endblock %}
{% endblock %}

{% block javascripts %} 
    {% javascripts
        '@MyBlogBundle/Resources/public/js/jquery-1.8.3.min.js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock javascripts %}

src/MyBundle/resources/views/MyBundle/modify.html.twig:

{% extends "MyBundle::layout.html.twig" %}

{% block mybundle_body %}

    <script type="text/javascript">
    // Enable the file uploader
    $(function() { // my error here : $ is not defined
        new PunkAveFileUploader({ 
            {# ... #}
        });
    });
    </script>
{% endblock %}

Muchas gracias.

preguntado el 07 de enero de 13 a las 20:01

2 Respuestas

Well, like you said, jQuery is loaded después de tu <script> tag, so when your script tries to use jQuery (with the $ sign), jQuery is not yet defined.

Movería el {% block javascripts %} a la etiqueta de la cabeza.

Respondido el 08 de enero de 13 a las 07:01

Thanks. However, I'm wondering why the {% block javascripts %} is at the bottom of body tag in Documentación de Symfony2. - Kwadz

If the script is only needed when the page is fully loaded, you can place it at the bottom of the body tag, that way the page will load the visual (html) content first and will be displayed to the user a little faster. But if you need it before the page is fully loaded you need to place it earlier in the code. - Tamir

You can build a new inheritance. So your script will always be after your jQuery.

{% block javascripts %} 
    {% javascripts
        '@MyBlogBundle/Resources/public/js/jquery-1.8.3.min.js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {% block script %}
    {% endblock script %}
{% endblock javascripts %}

src/MyBundle/resources/views/MyBundle/modify.html.twig:

{% extends "MyBundle::layout.html.twig" %}

{% block mybundle_body %}
   //some stuff
{% endblock %}

{% block script %}

<script type="text/javascript">
    // Enable the file uploader
    $(function() { // my error here : $ is not defined
        new PunkAveFileUploader({ 
            {# ... #}
        });
    });
    </script>
{% endblock %}

Respondido el 08 de enero de 13 a las 09:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.