Symfony2 Assetic jQuery configuration

Question

I can't find any resources for this.

I've got a base.twig.html template that all my pages stem from. At the bottom I load the required js for the site: jquery, bootstrap, and some custom javascript

{% block reqscripts %}
    {% javascripts '@jquery' '@bootstrap_js' '@sc_js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block extrajs %}

{% endblock %}

The required scripts load and work great!

You'll notice I left an empty "extrajs" block so I can load page specific js if needed.

When I override that block and load other javascript files they throw

$ not defined
jQuery not defined

errors.

Why is this happening and how can I set up my template to handle my extrajs block without jquery errors.

I can show my assetic config if needed but I really doubt that's the problem as jquery is loading just fine.

Edit So the scripts in "extrajs" block actually do execute, but errors are thrown. What is the correct way to do this?

Edit Skeleton for base.html.twig as requested

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    {% block reqstyles %}
        {% stylesheets '@SCMainBundle/Resources/public/css/fonts.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" screen="media"/>
        {% endstylesheets %}

        {% stylesheets '@bootstrap_less' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
        {% endstylesheets %}
        {% block extracss %}

        {% endblock %}
    {% endblock %}
    <title>{% block titleblock %}{% endblock %}</title>
</head>
<body {% block bodyid %}{% endblock %}>

{% block header %}
    {% include 'SCMainBundle:Templates/Header:basic-header.html.twig' %}
{% endblock %}

{% block nav %}
{% endblock %}

{% block content %}

{% endblock %}


{% block footer %}
    {% include 'SCMainBundle:Templates:footer.html.twig' %}
{% endblock %}

{% block reqscripts %}
    {% javascripts '@jquery' '@bootstrap_js' '@sc_js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {% block extrajs %}

    {% endblock %}
{% endblock %}

</body>
</html>

As you can see, jQuery is loaded first with no error and all files in that javascript block work.

The next block throws missing jquery errors, but still executes the script just fine.

Where do those blocks appear in your template? And more importantly in what order? — Debreczeni András, Jun 11 '14 at 18:05
At the bottom before the ending body tag, and in that order. Required first, extra right after. Templates extending that template do not override the requirejs block, only the extrajs block — Theodore Enderby, Jun 11 '14 at 18:08
If you paste your template skeleton I can tell you if the order of the blocks are okay (for you scenario). What's the best practice to include required javascript - in head or in body? I will let more advanced javascript users answer that. Here is one: http://stackoverflow.com/questions/14328449/when-do-you-put-javascript-in-body-when-in-head-and-when-use-doc-load — Debreczeni András, Jun 11 '14 at 18:13

score 0 · Answer 1 · answered Jun 11 '14 at 19:31

0

Similar to another question, I had stupidly extended my extrajs block INSIDE my content block, thus throwing off all orders.

answered Jun 11 '14 at 19:31

Theodore Enderby

622
1
6
19

Symfony2 Assetic jQuery configuration

1 Answers1